Web Design Wikiclass | Tutorial / HTML and CSS: Basic Concepts

Overview - HTML is for content and CSS is for presentation. This tutorial gives you a taste of HTML and CSS.

Activity 1:

Download Notepad2 or Notepad++ as the text editor for the exercise.
Launch the text editor to create a HTML file with the following content

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <title>Your web page title here</title>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

</head>

<body>

  <h1>This is Header 1</h1>

  <h2>This is Header 2</h2>

  <p>This is a paragraph</p>

  <h2>This is Header 2</h2>

  <p>This is a paragraph</p>

  <h2>This is Header 2</h2>

  <p>This is a paragraph</p>

</body>

</html>

[Get Code]

Use a browser to view the saved HTML file.
Note the following basic tags for HTML

    <html>...</html>    Creates the html document
    <head>...</head>    Contains the head information which are not visible to the user
    <title>...</title>  Contains the title of the document which appears at the top of the browser window
    <body>...</body>    Contains the viewed portion of the document

Try to add some Chinese characters within the paragraph, and see if the browser can display them correctly.

(Q1) What is the function of <title> tag in the head section of HTML?

(Q2) What is the function of <meta http-equiv="content-type" content="text/html; charset=utf-8" /> tag in the head section of HTML?

Activity 2:

Use the HTML file in Activity 1 to experiment with the following HTML tags.
<strong> - Find any word within a <p>...</p> and enclose it with <strong> and </strong>

(Q3) What is the semantic meaning of <strong> in HTML?

<blockquote> - Add some text within <blockquote>. Put the whole block in a <p>...</p>.

(Q4) What is the semantic meaning of <blockquote> in HTML?

<code> - Add some text within <code>. Put the whole block in a <p>...</p>.

(Q5) What is the semantic meaning of <code> in HTML?

Activity 3:

Use the HTML file in Activity 1 to experiment with the HTML Lists.
Put the following into the HTML and note the appearance in the browser.

<h2>Why this is</h2>

<ul>

  <li>To learn HTML</li>

  <li>To show off</li>

  <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>

</ul>

[Get Code]

(Q6) Describe the appearance of HTML unordered list if you do not apply any CSS to style it.

Put the following into the HTML and note the appearance in the browser.

<ol>

  <li>To my boss</li>

  <li>To my friends</li>

  <li>To my cat</li>

  <li>To the little talking duck in my brain</li>

</ol>

[Get Code]

(Q7) Describe the appearance of HTML ordered list if you do not apply any CSS to style it.

Put the following into the HTML and note the appearance in the browser.

<h1>Some random glossary thing</h1>

<dl>

  <dt>HTML</dt>

  <dd>Abbreviation for HyperText Markup Language - a language used to make web pages.</dd>

  <dt>Dog</dt>

  <dd>Any carnivorous animal belonging to the family Canidae.</dd>

  <dd>The domesticated sub-species of the family Canidae, Canis lupus familiaris.</dd>

  <dt>Moo juice</dt>

  <dt>Cat beer</dt>

  <dt>Milk</dt>

  <dd>A white liquid produced by cows and used for human consumption.</dd>

</dl>

[Get Code]

(Q8) Describe the appearance of HTML definition list if you do not apply any CSS to style it.

(Q9) Write a sample HTML code to demonstrate that we make a nested unordered list.

(Q10) What are the bullet characters used in a three-level nested unordered list.

Activity 4:

Create a HTML file with the following content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <title>HTML and Layout Example</title>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

</head>

<body>

<div id="container">

  <div id="header">

    <h1>Header usually contain a site's logo and name</h1>

  </div>

  <div id="wrapper">

  <div id="content">

    <h1>Main body copy heading</h1>

    <p><strong>Bold fontstyle for description</strong>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue velit ut lectus faucibus suscipit. Sed vel sem ac arcu dapibus imperdiet et a tortor.</p>

    <h2>First Section Heading</h2>

    <p>column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>

    <p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>

    <h3>Sub-Section Heading</h2>

    <p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>

    <p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>

  </div>

  </div>

  <div id="navigation">

  <h2>Website Main Navigation</h2>

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">About Us</a></li>

    <li><a href="#">Our Services</a></li>

    <li><a href="#">Portfolio</a></li>

    <li><a href="#">Our Blog</a></li>

    <li><a href="#">Contact Us</a></li>

  </ul>

  </div>

  <div id="extra">

  <h2>More stuff here</h2>

  <h3>More to say 1</h3>

  <p>Cras sed neque eget metus faucibus hendrerit. Nunc a nisi quis ligula pulvinar malesuada. Vestibulum eu urna eget diam ultricies viverra imperdiet eu odio. Quisque tincidunt tincidunt lacus, non dignissim turpis lobortis at. Vivamus ultricies pretium nulla, id ornare purus tincidunt et.</p> 

  <h3>More to say 2</h3>

  <p>Quisque tincidunt tincidunt lacus, non dignissim turpis lobortis at. Vivamus ultricies pretium nulla, id ornare purus tincidunt et. Praesent tempor mauris in lacus faucibus iaculis. Integer a vestibulum erat. Fusce ac mauris sed sem tincidunt</p>

  </div>

  <div id="footer">

    <p>Footers usually contain less important items like a <a href="#">copyright notice</a> and links to the site's <a href="#">terms and conditions</a> or <a href="#">privacy policy</a>.</p>

  </div>

  </div>

</body>

</html>

[Get Code]

Use your browser to view the HTML.

(Q11) Make a guess about the function of <div> in HTML.

Activity 5:

Create a file named style01.css with the following content.

html,body{margin:0;padding:0}

body{font: 76% arial,sans-serif}

p{margin:0 10px 10px}

a{display:block;color: #006;padding:10px}

div#header{position:relative}

div#header h1{height:80px;line-height:80px;margin:0;

padding-left:10px;background: #EEE;color: #79B30B}

div#header a{position:absolute;right:0;top:23px}

div#content p{line-height:1.4}

div#navigation{background:#B9CAFF}

div#extra{background:#FF8539}

div#footer{background: #333;color: #FFF}

div#footer p{margin:0;padding:5px 10px}

div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{float:left;width:100%}

div#content{margin: 0 25%}

div#navigation{float:left;width:25%;margin-left:-100%}

div#extra{float:left;width:25%;margin-left:-25%}

div#footer{clear:left;width:100%}

[Get Code]

Add the following line in the head section of the HTML file in Activity 4.

    <link rel="stylesheet" href="style01.css" type="text/css" media="screen" charset="utf-8"></link>

Use your browser to view the resulting HTML.

(Q12) Briefly describe the layout after applying style01.css to the HTML.

Create a file named style02.css with the following content.

html,body{margin:0;padding:0}

body{font: 76% arial,sans-serif}

p{margin:0 10px 10px}

a{display:block;color: #981793;padding:10px}

div#header h1{height:80px;line-height:80px;margin:0;

  padding-left:10px;background: #EEE;color: #79B30B}

div#content p{line-height:1.4}

div#navigation{background:#B9CAFF}

div#extra{background:#FF8539}

div#footer{background: #333;color: #FFF}

div#footer p{margin:0;padding:5px 10px}

div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{float:left;width:100%}

div#content{margin: 0 25%}

div#navigation{float:left;width:25%;margin-left:-25%}

div#extra{float:left;width:25%;margin-left:-100%}

div#footer{clear:left;width:100%}

[Get Code]

Add the following line in the head section of the HTML file in Activity 4.

    <link rel="stylesheet" href="style02.css" type="text/css" media="screen" charset="utf-8"></link>

Use your browser to view the resulting HTML.

(Q13) Briefly describe the layout after applying style02.css to the HTML.

Create a file named style03.css with the following content.

html,body{margin:0;padding:0}

body{font: 76% arial,sans-serif}

p{margin:0 10px 10px}

a{display:block;color: #981793;padding:10px}

div#header h1{height:80px;line-height:80px;margin:0;

  padding-left:10px;background: #EEE;color: #79B30B}

div#content p{line-height:1.4}

div#navigation{background:#B9CAFF}

div#extra{background:#FF8539}

div#footer{background: #333;color: #FFF}

div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:left;width:100%}

div#content{margin-right: 50%}

div#navigation{float:left;width:25%;margin-left:-50%}

div#extra{float:left;width:25%;margin-left:-25%}

div#footer{clear:left;width:100%}

div#footer a{display:inline;padding:0;color: #C6D5FD}

[Get Code]

Add the following line in the head section of the HTML file in Activity 4.

    <link rel="stylesheet" href="style03.css" type="text/css" media="screen" charset="utf-8"></link>

Use your browser to view the resulting HTML.

(Q14) Briefly describe the layout after applying style03.css to the HTML.

Create a file named style04.css with the following content.

html,body{margin:0;padding:0}

body{font: 76% arial,sans-serif;text-align:center}

p{margin:0 10px 10px}

a{display:block;color: #006;padding:10px}

div#header{position:relative}

div#header h1{height:80px;line-height:80px;margin:0;

padding-left:10px;background: #EEE;color: #79B30B}

div#header a{position:absolute;right:0;top:23px}

div#container{text-align:left}

div#content p{line-height:1.4}

div#navigation{background:#B9CAFF}

div#extra{background:#FF8539}

div#footer{background: #333;color: #FFF}

div#footer p{margin:0;padding:5px 10px}

div#footer a{display:inline;padding:0;color: #C6D5FD}

div#container{width:700px;margin:0 auto}

div#wrapper{float:left;width:100%}

div#content{margin: 0 150px}

div#navigation{float:left;width:150px;margin-left:-700px}

div#extra{float:left;width:150px;margin-left:-150px}

div#footer{clear:left;width:100%}

[Get Code]

Add the following line in the head section of the HTML file in Activity 4.

    <link rel="stylesheet" href="style04.css" type="text/css" media="screen" charset="utf-8"></link>

Use your browser to view the resulting HTML.

(Q15) What is the major difference between layout01 and layout04?

Activity 6:

A css (cascading style sheet) file controls the color, size, style, font, borders, padding etc of HTML elements. It can be:

1) applied to a html tag (inline style sheets)

2) embedded in the <head> of a document or

3) an external file.

An external css style sheet can be over-ridden by an embedded style sheet, this can be over-ridden by an inline style sheet.

Do some experiment to verify the above statement about formatting HTML with CSS.

Three different ways to apply CSS to HTML

In-line CSS

They are put straight into the HTML tags using the style attribute.

Examples

<h1 style="color:#f00; font-size:22px;">Some Heading</h1>

<p style="margin-top:30px;">Some Text</p>

Embedded CSS

They are put inside the head tags using the style tag.

Example

      <style type="text/css">
        p  { margin-top:30px; }
        h1 { color: #f00; font-size:22px; }
      </style>

External CSS

They are put in an external file that can be linked to in the HTML using the link tag. The link to the CSS file should be put inside the head tag of the HTML.

Example

<link rel="stylesheet" type="text/css" href="style.css" />

Acknowledgement

Special thanks to Layout Gala: a collection of 40 CSS layouts based on the same markup