HTML Basics X-Ray Goggles: Uncovering HTML · Introduction-Under the cover of each website is html...
12
HTML Basics X-Ray Goggles: Uncovering HTML Basic HTML Guide Workbook
Transcript of HTML Basics X-Ray Goggles: Uncovering HTML · Introduction-Under the cover of each website is html...
HTML Basics
X-Ray Goggles: Uncovering HTML
Basic HTML Guide Workbook
Introduction- Under the cover of each website is html or HyperText Markup
Language (more complex websites will also use CSS)
To view what’s under the hood of a webpage, go to Mozilla’s free service X-Ray
Goggles https://goggles.webmaker.org/ and “activate” them.
While the different parts of the website are laid out visually, html is built top to bottom.
Another way (and more valuable way!) to see how a website is designed is to use the
F12 key on the keyboard when on a website.
The web browser will now display the actual html code itself for any website. This code
can be copied and reused!
*although sometimes codes will not be complete because of CSS and links may not
work if they redirect to inside a server.
Tags: To change things in Html you will need to use tags. Tags are created by using
forward and backwards arrows. For any one change you will need two tags; the first
one starts the formatting and the second ends it – for example <body> XXXXXX
</body>. The ending tag will include a backslash / in the tag. Also note tags are not
case sensitive.
1. In order to start a html document, first specify the document as html by entering
html tags.
2. Next we’ll set up a header. A header is Metadata (or data about data) and
won’t actually be seen on the website but might be helpful for organizing your
webpage.
3. After a header we’ll add a title; again, though, this is just the title of the
webpage and will not actually be seen by a user.
4. Now we’ll start adding the main text of the webpage; this is called the body.
Everything below the body tag will be visible to the public. To create the body,
insert two <body> tags after the </head> tag and before closing </html tag>
5. Now that we have the basic outline of the body, we’ll quickly create a new
paragraph with the <p> tag. A paragraph tag separates body text and lets you
format each section differently.
6. As we’ve talked about, Html does not work like a Word document even though it
looks like one. Adding spaces and using the return/enter will not change the
actual format of the website (only the code layout behind it). To add a line
space or line break, enter the tag <BR>.
7. To add spaces, enter   which stands for nonbreaking space. Note that you
do not need to enter arrows around this notation.
8. Now let’s add a title to the webpage. By entering in the header tag <h1> the
font behind the tag will be large and bold. The number following the “h” is the
size. To decrease the size, enter a larger number (up to 6).
9. Now let’s make adjustments to the font. In a Word document, these changes are
all done on the tool bar, but in Html they are all made with tags. The three tags
we are going to introduce are bold or <B> underline <u> and italics <i> add and
beginning and ending tag to change the surrounding text.
10. Next we’ll change the font. Start the tag with <font face= and then enter the
font you’d like in quotation marks. The whole thing should look like <font
face=”Arial”> close the tag with </font> This tag will affect the header, so we’ll
put them behind it.
11. To change the font size and the font color, add font size=”4” font color=”blue”
after the font face command. Note that the font size is in increments from 1-9
unlike a traditional word processor.
12. To move the text on the page top to bottom or right to left in html, we’ll need to
give the text coordinates. Use the tag <body topmargin=”XX”> to adjust the top,
body leftmargin, body rightmargin and body bottomargin
13. In order to navigate to other pages of a website, link content, or share pictures,
we’ll need a link. A link is a button which connects one part of the Internet to
another part. In order to make a link, we’ll need a URL address to send our users
to. First simply copy the URL of the website (in our case Elmhurst Public Library’s
homepage) from the top of the navigation bar. To create a link, use the tag <>
<a href="XXXX”> and then close the link with a </a> Everything in between will
be the title for the link.
14. Finally we’ll add an image, which is a bit like adjusting the margins and inserting
a link. There is a way to insert images from a server, but we’re just going to cover
how to link a photo – which means that the photo is stored somewhere else on
the Internet and we’re displaying a copy of that image. If the image is taken
down at the original source, we will lose our image as well! The tag for an image
is <img src="XX” however after linking the image we’ll also need to specify the
image size by using alt=height=”xx” width=”xx”
15. Finally, we’ll cover how to change the background color. The tag is body
bgcolor="#”. A lot of html is number coded; each color is given a specific
number to be used for coding. In this case, we’ll set our background to
"#E6E6FA" which is a pinkish color.
Conclusion- While this is only the beginning, you’ll have enough tools to begin
editing blog templates, simple website code, and more! To really dive into to web
design, though, more skills will be need in CSS (cascading style sheets) and the
programs that implement them, such as Dreamweaver.
In addition, to start your own website you will need a:
Domain name: a unique URL that users enter to reach your website
Web Hosting: a service or server that stores your website and allows it to be accessed
by users on the Internet
For more info:
Check out Code Academy, which covers what we went through in a walkthrough
tutorial here: http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1
Or use Lynda.com, Elmhurst Public Library’s online learning service, which has hundreds
of videos on html and web design. (Note: must access by going through EPL’s website
first)
