Basic Principles for Web Design Source:

HTML is a language for describing web pages. HTML stands for H yper T ext M arkup L anguage HTML is NOT a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages

HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags

HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page The content of a website is stored within HTML tags (or elements).

Explanation: The text between and describes the web page The text between and is the visible page content The text between and is displayed as a heading The text between and is displayed as a paragraph This Is A Heading This is a paragraph.

There are 6 heading tags, where the tag is usually considered the highest and the lowest. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Large blocks of text in sentence for is form is usually placed with in a paragraph tag: This is a paragraph This is another paragraph

Links are created using the anchor tag: Notice anything different about this tag? href is an attribute of the tag that tells the browser where to navigate to. The text that is displayed on the website is between the start and end tags (Check out this…). HTML attributes are followed by an equal (=) sign and contain data with quotes (____). Some attributes are optional, others are required. Check out this link to Facebook! Pictures are displayed using the image tag: Where is the end tag? What do you think the src attribute does? What do you think the alt tag does? It is also a good idea to include the width and height attributes for faster loading. ex: Width and Height are in pixels. Thus, this image will be displayed 300 pixels wide and 400 pixels tall

Lists are created using the unordered, ordered, and definition list tags: (,, and ) Which two types of lists are shown above? What do you think an unordered list looks like? What do you think an ordered list looks like? What do they both have in common? What do you think the tag stands for apples oranges bananas Item 1 Item 2 Item 3

Here are some other helpful HTML tags: The tag, or break tag causes a line break (like hitting enter while you type). The tag, or horizontal rule tag creates a horizontal line that can serve as a border between sectionsb The tag, or boldface tag formats the text between the start and end tag as bold. The tag, or italics tag formats the text between the start and end tag as italicized. The tag, or emphasis tag tears a hole in the space-time continuum, allowing for time travel and warp speed And one of the most important tags is the tag, or division tag. The tag is used to group other elements (tags) together into one block of content. This is bold This is italicized This is emphasized

CSS defines how HTML tags should be display. CSS stands for Cascading Style Sheet Can be used to change font type, color, size, etc… Can be used to add background colors or images to elements Can be used to add borders around elements Can be used to arrange the layout of the content Is stored in a separate file that is accessed by the HTML file

Explanation: The p element is styled here according to the entries between the two brackets {…} These properties cascade down to all tags You can choose colors by typing out the name of the color (blue, black, red, etc…) or by using a hexadecimal number value that represents the red, green, and blue mix that creates the color that you want. p{ background-color: blue; text-align: center; font-size:20px; font-family: Times New Roman, Times, serif; color:#fff; }

99CCFF (or 9CF for short)#99CCFF (or #9CF for short) #99FF33 (or #9F3 for short) Where do you think #00FF00 is on the map? Hexadecimal number order: A B C D E F Colors are represented in a six-digit hex number: RRGGBB (Red, Green, Blue) For web-safe colors, shorten the number to three digits: RGB These values are always preceded by a pound sign #

Syntax: What is in each line? – Each new line begins with the attribute that we want to define (i.e. font-size) – Next is a colon : – Then, the desired value for that attribute – Each line must end with a semi-colon ; Why are there three different types of fonts under font-family? What does color modify? Why isnt it called font-color? What color is #009? Do you see what is wrong with the code above? h1{ font-weight: bold font-size: 50px; font-family: Times New Roman, Times, serif; color:#009; }

Shortcuts: All of the font attributes have been collapsed into one declaration. Each attribute is separated from the others with a space. Since color is not technically a font property, it has to be declared on its own line. Some other CSS properties allow for shortcuts as well. h1{ font: bold 50px Times New Roman, Times, serif; color:#009; }

Styling groups: The display attribute tells the browser that we want the dive to be treated like a block rather than a line. We can give our block fixed dimensions of height and width. Here, we have defined the width as 600 pixels and have allowed the browser to set the height based on the amount of content within the Shortcut: The margin attribute is a shortcut form of margin-top, margin-right, margin-bottom, margin-left in that order. What is wrong with the above code? div{ display: block; width: 600px; height: auto; margin:0 auto 0 auto; color:FFF; }

Styling with classes: In the HTML code we have created a heading ( ) with a class attribute of myCustomHeaderClass, and another with no class attribute The CSS entry for h1 will normally cause all h1 tags to be black. However, because we have created a CSS entry for h1.myCustomHeaderClass, this h1 tag will be bright yello h1{ color:#000; } h1.myCustomHeaderClass{ color:#FF0; } This heading will be bright yellow This heading will be black CSS Code: HTML Code:

Refresh CSSCSS HTMLHTML Try It!

is an excellent tool for beginners. There you can quickly and easily learn anything from HTML to Flash. Best of all, ITS FREE!