Web Design The History, Coding, and Steps to Create Your Own
Site
Slide 2
Want to See the Worlds First Website?
Slide 3
Slide 4
One of My Favorite Modern Websites is
Slide 5
Slide 6
Websites I USE Most Include:
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Current Websites include: Animations Videos Sounds Interactive
elements E-Commerce (buying and selling) Advertising Gaming Social
Networking Live video Online classes Whats next?
Slide 13
Where Did the Internet Come From? The concept of connecting
computers together to share information came about in 1962. In 1965
one computer in Massachusetts was connected to one computer in
California by using a low-speed dial-up telephone line. By the end
of 1969, four computers were networked together and were called the
Arpanet and the speed was better.
Slide 14
More History In 1972 electronic mail, or e-mail was introduced
and was the top application on the Arpanet for over ten years. Also
in 1972 the term Internet replaced the Arpanet after multiple
networks were connected to each other. Interconnected networks. In
1984 there were 1,000 computer hosts on the Internet. In 1987 there
were 10,000 hosts. In 1989 there were 100,000 hosts.
Slide 15
Still More Internet History In 1991 the Internet added included
graphics for the very first time! Also in 1991, the Internet came
to Idaho. Connecting to the Internet means using your home phone
line to call a host computer! It took forever! In 1992, there were
over 1 million hosts. In 1994 the White House posted its own
website and shopping and banking online became a reality.
Slide 16
Yet More History In 2002, creating your own blog became
popular. In 2006 cloud computing becomes all the rage and thumb
drives and installed software is less in demand. In 2008, NASA
sends images over their own deep space network from earth up to a
spaceship orbiting 20 million miles away. In 2010 there were over
100 million registered domain names (Like www.mrjohns.org). In
2012, Facebook reaches 1 BILLION active users each month. Also,
Gangnam Style became the first YouTube video to get over 1 billion
views.Gangnam Style In 2013, 50% of all Internet traffic was either
YouTube or Netflix!
Slide 17
How Do You Make a Web Site?
Slide 18
HTML Before programs did all the coding for you, websites had
to be created by typing coding called Hyper Text Markup Language,
or HTML. One typing or spelling error and the entire site or
elements of it - would not work.
Slide 19
Lets Do Some Coding! Click the START icon and type Notepad into
the search box (Or select it if it is on the start menu).
Slide 20
Type Check out my cool webpage! (or something like that) in
Notepad.
Slide 21
SAVING We want to save this file twice. Once as a Notepad file,
so we can keep working on it. And once as an html file, which we
can view as a webpage. Save your file as First Webpage last name
and keep it as a notepad file.
Slide 22
Secondly, save the file again but save it by typing.html at the
end of the file name.
Slide 23
Check it Out! Go find the html file you just saved. Double
click to open it. Because it is an html file, it will open in a
browser even though it isnt published on the Internet. What does it
look like?
Slide 24
Now add some html CODE right onto the Notepad page as seen
above. It is the HTML coding that gives you the power and control
that you want on your webpages. I indent my text just so it stands
out while Im coding. It does NOT change how it looks online. Save
the.html file again. Opening tag /Closing tag
Slide 25
Open the HTML file in your browser again. Does it look
different with the coding? Why or why not?
Slide 26
Add a heading by typing the tags. Add a title by typing the and
tags between the heading tags. Give your webpage a title. This WILL
BE visible. Choose wisely. Search engines will use these words to
find your site. Save your html file again and look at it in your
browser. What is different now?
Slide 27
Did You Catch My Error on the Previous Page? Checking for
errors is called de-bugging
Slide 28
I do not want the > at the end of the sentence!
Slide 29
This is what it looks like online
Slide 30
Paragraphs, Emphasis, & Line Breaks Add the line, How
amazing (or something like it) on a second line beneath your first
line of text. Save it. Open it in your browser again. Are there two
lines of text?
Slide 31
Paragraphs HTML doesnt care about spaces between words like
this Or text on separate lines like this. So you have to TELL it to
start a new paragraph with the and code.
Slide 32
Add the paragraph coding for both lines of test between BODY
tags (codes). SAVE and VIEW it in your browser again.
Slide 33
Emphasis & Strong Tags Add the two new lines above. SAVE
and VIEW it again.
Slide 34
Line Break Add a line break. SAVE and VIEW it.
Slide 35
Headings You can change text size by using the tag. Add and as
seen above. SAVE and VIEW!
Slide 36
H1, h2, h3, h4, h5, h6 Experiment by adding additional heading
(text size) tags to other lines of text. Changing text size
randomly is not recommended. Use heading sizes carefully. Typically
there will only be one or two text sizes on a website. For this
assignment, give your first line the tag and the second line the
tag.
Slide 37
EXAMPLE
Slide 38
Lists Add the and tags to create an unordered list ( is for
ordered lists). Indent 10 spaces and add three lines (listed
items). SAVE. VIEW.
Slide 39
Change the unordered list to an ordered list SAVE VIEW IT!
Slide 40
Links Web pages are great for sharing or getting information
but the power of the Internet is the HYPER TEXT part of HTML. Hyper
text, or hyperlinks are the real power of linked computers. We can
link to other sites, pages, or even places on the same web page
with the correct CODING!
Slide 41
The Tag What does this look like online??
Slide 42
Broken Link This is my web page in the browser. Why isnt the
link working? It should be BLUE and an active link!
Slide 43
This is the html file. Where are my TWO errors?
Slide 44
The ( needs to be a < And I have one too many ws
Slide 45
IT WORKS!!
Slide 46
Notice that the URL (Uniform Resource Locator), or web address,
is not as simple as www.mycoolwebpage.com It is not published, so
opens the file where it is saved. Mine is in certain folders and
sub-folders on the C drive of my computer. Once published, a site
has an online URL but you have to pay to own a true www.com
address.
Slide 47
Your Name Before we go any further, put your first and last
name in one of the text lines of your Notepad file so I can grade
it.
Slide 48
Text Colors There are 140 color codes that can be used to
change text colors. You can find the codes at this website:
http://www.w3schools.com/tags/ref_color names.asp (The link is on
my website.) http://www.w3schools.com/tags/ref_color names.asp The
17 standard colors are: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, orange, purple, red, silver, teal,
white, and yellow.
Slide 49
Add the and tag Visit the text color website and copy and paste
different color codes in.
Slide 50
Images!
Slide 51
Finding and Saving Images Jump on the internet. Find and save
one image. Left click on the image to make sure it is full- sized.
Right click and select save image as. Place the image in the
pictures folder.
![Ten Steps to Coding Anesthesia Services- BE [3-10-2011]static.aapc.com/a3c7c3fe-6fa1-4d67-8534-a3c9c8315fa0/... · 2011-03-17 · 3/10/2011 1 Ten Steps to Coding Anesthesia Services](https://img.pdfslide.net/doc/110x75/5f20231a1146744ee77c0dbe/ten-steps-to-coding-anesthesia-services-be-3-10-2011-2011-03-17-3102011-1.jpg)
