22
Designing Web Pages Getting to know HTML...
Designing Web PagesGetting to know HTML...
What is HTML?
•Hyper Text Markup Language
• HTML is the major language of the Internet’s World Wide Web.
• Web sites and pages are written in HTML.
Getting Started...
• By learning HTML you’ll have more control over how your web pages look, and you’ll more easily discover ways to make your pages look better.
• HTML is platform independent, meaning it can be viewed on any type of computer.
• The program Notepad in Windows is the easiest ways to write HTML.
Using “index.html”
•Your homepage (1st page) MUST be titled index.html because this is the way almost all host servers are set up to handle the main page of your site.
What are tags...
• Tags make up the entire structure of an HTML document. < >__</> When you place something within these you are making it known as a tag. Tags define what is within them.
• For example: the <b> </b> tags are saying to start and stop bold text. The tag with the slash (/) is known as the closing tag.
<b> This text is bold</b>
• Most HTML Tags work in pairs. (Does that make these dynamic duos ‘tag teams’?).
Document Structure...• HTML documents have 2 parts = the head and the body.• The head contains the document’s title and similar information
(this info does NOT show on your page or body). The body contains most everything else.
<!DOCTYPE> (defines the page for web browsers).<html> (Defines everything in your document and sets the boundaries).<head> (contains document title, used by search engines, doesn’t appear in the webpage).
<title> Title goes here</title> (created within the head, displays at the top of the browser window).
</head><body> (contains text, headings, links, graphics, sound etc.)Body goes here</body></html>
Example of a basic HTML document:
Headings...• Headings are some of the most important tags within the
body of your HTML document.
• Usually use headings to tell what the following section of your page is about. These are similar to titles.
• The opening tag for a heading is <h_> and the closing </h_> __being the size of the heading…from 1 to 6. (1 being the largest and 6 being smallest) Ex.<h1>Headings</h1>
Sample Headings...
Today is a good day. H1<h1>Today is a good day.</h1>
Today is a great day. H2<h2>Today is a great day.</h2>
Today is a marvelous day. H3<h3>Today is a marvelous day.</h3>
Today is a wonderful day. H4<h4>Today is a wonderful day.</h4> Today is a neat day. H5<h5>Today is a neat day.</h5>Today is a fabulous day. H6
<h6>Today is a fabulous day.</h6>
The Line Break...
• If you want your text to start on a new line (similar to pressing enter) you need to insert a line break.
• Tag for a line break is <br> There is NO ending tag, but being consisted is a good habit to follow </br>.
• Example w/o Line Break:
Sentence one. Sentence two. Sentence three.
• Example with Line Break:Sentence one.<br>Sentence two.<br>Sentence three.<br>
Paragraphs...• You will often use paragraphs in HTML, just as you do
when you’re writing stories.
• The tag is <p> </p> The closing tag is not always needed, but be safe and use it anyway.
<br> - adds single space
<p> - adds double space
Creating Unordered ListsUnordered List: uses bullets
<ul>
<h4>Classes</h4>
<li> Computers </li>
<li> Multimedia</li>
<li> TV/Digital Production</li>
</ul>
Tags for List - <li></li>!
Classes• Computers• Video Gaming 2• English
Creating Ordered ListsOrdered List: numbered
<ol>
<h4>Classes</h4>
<li> Computers </li>
<li> Multimedia</li>
<li> TV/Digital Production</li>
</ol>
Tags for List - <li></li>!
Classes1. Computers2. Video Gaming23. English
Text Formatting Properties...
• Common formatting tags:
<b>bold</b>
<i>italics</i>
<hr>horizontal line</hr> or <hr>
<br>break</br> or <br>
<u>underline</u>
<center>Center</center> or <h1 align=center ></h1>
<li>list</li>
<font size=n> </font> or <h1></h1>
<font color=“red”> </font color>
Horizontal Ruled Lines...
• Horizontal Ruled Lines are used to separate different areas of a web page.
• The tag is <hr> IT DOES NOT HAVE A CLOSING TAG!
• You may add width=n (for setting pixel width) OR width=n% (for a certain percentage of the screen width).
• Size=n to make the line a certain pixel amount thick.
• A plain <hr> with no attributes will make the line the full width of the screen.
ALIGN Attributes...
• Setting alignment:• LEFT - <h1 align=left>Left </h1>
• CENTER• <h1 align=center>Center </h1>
• RIGHT• <h1 align=right>Right </h1>
Text after the ‘red’ is what will be seen on web page.
Center applies to ‘heading’ only.
Tags can also have attributes, which are extra bits of information.
Links...(Hypertext Reference)
• To add a link - <a href=“location”> Link Title</a>. Whatever appears between these two tags will become underlined and colored, and if you click on the underlined text it will send the browser to the location within the quotes.
• Example of link:
Visit <a href=“http://us.blizzard.com/en-us/”> the best Video Gaming Company ever! Site</a>!• To insert a link from your page, copy the URL into your
index.html page.
E-Mail Links...
• Although links are usually used to send people to other web pages, you may also use it to send e-mail to a specific address by using a location of mailto:user@host.
• Example of a Mailto: Link…
Send e-mail to <a href=“mailto:[email protected]”> Ms. Julie MacLeod</a>!• To insert your email, copy your address into your index.html
page.
Images...(Image Source)
• Make sure images are in the gif or jpg (or jpeg) file formats. You won’t be able to use .bmp format files!
• Tag: <img src=“location”> THERE’S NO CLOSING TAG!
• Example: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
• To insert an image from another webpage you must copy the code into your index.html page.
• Once an image is located > right click on image > Properties > copy source > paste into the <img src> tag.
The BODY Attributes...• Can change link colors in body tag…
EXAMPLE: <body bgcolor=blue> • Can add ‘moving’ text to page
EXAMPLE: <marquee> Video Gaming ROCKS! </marquee>
• Center email and link
EXAMPLE: <center> Goals </center>
• Create a ‘horizontal’ rule
EXAMPLE: <hr>
Now let’s practice!!!
Practice creating a page using the ‘basic’ formatting tags.
(www.w3schools.com).http://www.pageresource.com/html/http://www.easywebtutorials.com/index.php
TutorialsIntroGetting StartedBasicElementsAttributesHeadingParagraphsLinksImages
