Designing Web Pages Getting 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 (1 st 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 tags are saying to start and stop bold text. The tag with the slash (/) is known as the closing tag. This text is bold 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.

(defines the page for web browsers). (Defines everything in your document and sets the boundaries). (contains document title, used by search engines, doesn’t appear in the webpage). Title goes here (created within the head, displays at the top of the browser window). (contains text, headings, links, graphics, sound etc.) Body goes here 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 and the closing __being the size of the heading…from 1 to 6. (1 being the largest and 6 being smallest) Ex. Headings

Sample Headings... Today is a good day. H1 Today is a good day. Today is a great day. H2 Today is a great day. Today is a marvelous day. H3 Today is a marvelous day. Today is a wonderful day. H4 Today is a wonderful day. Today is a neat day. H5 Today is a neat day. Today is a fabulous day. H6 Today is a fabulous day.

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 There is NO ending tag, but being consisted is a good habit to follow. Example w/o Line Break: Sentence one. Sentence two. Sentence three. Example with Line Break: Sentence one. Sentence two. Sentence three.

Paragraphs... You will often use paragraphs in HTML, just as you do when you’re writing stories. The tag is The closing tag is not always needed, but be safe and use it anyway. - adds single space - adds double space

Creating Unordered Lists Unordered List: uses bullets Classes Computers Multimedia TV/Digital Production Tags for List - ! Classes Computers Video Gaming 2 English

Creating Ordered Lists Ordered List: numbered Classes Computers Multimedia TV/Digital Production Tags for List - ! Classes 1.Computers 2.Video Gaming2 3.English

Text Formatting Properties... formattingCommon formatting tags: bold italics horizontal line or break or underline Center or list or

Horizontal Ruled Lines... Horizontal Ruled Lines are used to separate different areas of a web page. The tag is 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 with no attributes will make the line the full width of the screen.

ALIGN Attributes... Setting alignment: LEFT - Left CENTER Center RIGHT Right 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 - Link Title. 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 the best Video Gaming Company ever! Site ! To insert a link from your page, copy the URL into your index.html page.

Links... links are usually used to send people to other web pages, you may also use it to send to a specific address by using a location of Example of a Mailto: Link… Send to Ms. Julie MacLeod ! To insert your , 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: THERE’S NO CLOSING TAG! Example : 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 tag.

The BODY Attributes... Can change link colors in body tag… EXAMPLE EXAMPLE: Can add ‘moving’ text to page EXAMPLE: Video Gaming ROCKS! EXAMPLE: Video Gaming ROCKS! Center and link EXAMPLE: Goals EXAMPLE: Goals Create a ‘horizontal’ rule EXAMPLE: EXAMPLE:

Now let’s practice!!! Practice creating a page using the ‘basic’ formatting tags. (

Tutorials Intro Getting Started Basic Elements Attributes Heading Paragraphs Links Images