What is HTML?
HTML stands for HyperText Markup Language. It structures the contents of a webpage, such as text, images, and links (while CSS styles the page). HTML is not a programming language, but a set of formatting rules.
Web pages are made up of elements, or pieces of content. Each element is enclosed by tags – an open tag, and a closed tag.
Some common elements:
- Headers <h1> </h1> to <h6> </h6>
- Paragraph <p> </p>
- Links <a href = “url” > Text to link </a>
- Images <img src = “logo.png”>
- Lists <ul></ul> (for bulleted lists) and <li></li> (for each element in a list)
Each of these elements are also contained within broader elements.
- An html document must be contained within the html tag <html> </html>
- The content displayed on the page is contained within a body tag <body> </body>
- The content not displayed on the page is contained within a head tag <head></head>
In class, use a text editor set to plain text to build a basic webpage with a title, a header, and a paragraph. As you become more comfortable, experiment with othe attributes, like color or alignment.
Body Attributes (using Hex colors)
- <body bgcolor=?>
- Sets the background color, using name or hex value
- <body text=?>
- Sets the text color, using name or hex value
- <body link=?>
- Sets the color of links, using name or hex value
- <body vlink=?>
- Sets the color of followed links, using name or hex value
- <body alink=?>
- Sets the color of links on click
- <p align=”center”><em>hello world!</em></p>
- <p align=”left”><em>hello world!</em></p>
- <p align=”right”><em>hello world!</em></p>
- SAIC Wired’s Detailed Introduction to HTML
- W3 Schools – HTML and CSS demos, tutorials, reference
- Codecademy – Interactive courses on how to build websites
6 //Web as Site
Generate three ideas for your a web site, as discussed in class. Refer to the project description for more details. How can a website be a work of art in itself? Be prepared to discuss your ideas in class. Use sketches, mockups and/or images to describe your ideas. You can use descriptive text as well, but be sure to include at least one visual element. Upload your proposals to the class blog.
Finish the html basics lesson on Codacademy.