8 //Intro to HTML

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.

Elements

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

Alignment Attributes

  • <p align=”center”><em>hello world!</em></p>
  • <p align=”left”><em>hello world!</em></p>
  • <p align=”right”><em>hello world!</em></p>

Learn More

Assignment

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.

//Codacademy

Finish the html basics lesson on Codacademy.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s