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

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

Activity 1:

Create a HTML file with the following content

<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.

Activity 2:

Add the following contents in your previous HTML file.

H1: Jonathan Doe

H2: Web Designer, Director

H3: Download PDF

H3: name@yourdomain.com

H3: (852) 2768-1234

H2: Profile

P: Progressively evolve cross-platform ideas before impactful infomediaries. Energistically visualize tactical initiatives before cross-media catalysts for change.

H2: Skills

H2: Web Design

P: Assertively exploit wireless initiatives rather than synergistic core competencies.

H2: Interface Design

P: Credibly streamline mission-critical value with multifunctional functionalities.

H2: Project Direction

P: Proven ability to lead and manage a wide variety of design and development projects in team and independent situations.

H2: Technical

L: XHTML

L: CSS

L: Javascript

L: Jquery

L: PHP

L: CVS / Subversion

L: OS X

L: Windows XP/Vista

L: Linux

H2: Experience

H2: Facebook

H3: Senior Interface Designer

H4: 2005-2007

P: Intrinsicly enable optimal core competencies through corporate relationships. Phosfluorescently implement worldwide vortals and client-focused imperatives. Conveniently initiate virtual paradigms and top-line convergence.

H2: Apple Inc.

H3: Senior Interface Designer

H4: 2005-2007

P: Progressively reconceptualize multifunctional "outside the box" thinking through inexpensive methods of empowerment. Compellingly morph extensive niche markets with mission-critical ideas. Phosfluorescently deliver bricks-and-clicks strategic theme areas rather than scalable benefits.

H2: Microsoft

H3: Principal and Creative Lead

H4: 2004-2005

P: Intrinsicly transform flexible manufactured products without excellent intellectual capital. Energistically evisculate orthogonal architectures through covalent action items. Assertively incentivize sticky platforms without synergistic materials.

H2: International Business Machines (IBM)

H3: Lead Web Designer

H4: 2001-2004

P: Globally re-engineer cross-media schemas through viral methods of empowerment. Proactively grow long-term high-impact human capital and highly efficient innovation. Intrinsicly iterate excellent e-tailers with timely e-markets.

H2: Education

H2: Indiana University - Bloomington, Indiana

H3: Dual Major, Economics and English — 4.0 GPA

P: Jonathan Doe — name@yourdomain.com — (852) 2768-1234

H1: means <h1> . . . </h1>
H2: means <h2> . . . </h2>
H3: means <h3> . . . </h3>
P: means <p> . . . </p>
L: means <li> . . . </li>

Activity 3:

Study the following CSS file.

/*

---------------------------------------------------------------------------------

STRIPPED DOWN RESUME TEMPLATE

    html resume

    v0.9: 5/28/09

    design and code by: thingsthatarebrown.com (matt brown) 

---------------------------------------------------------------------------------

*/

.msg { padding: 10px; background: #222; position: relative; }

.msg h1 { color: #fff;  }

.msg a { margin-left: 20px; background: #408814; color: white; padding: 4px 8px; text-decoration: none; }

.msg a:hover { background: #266400; }

/* //-- yui-grids style overrides -- */

body { font-family: Georgia; color: #444; }

#inner { padding: 10px 80px; margin: 10px auto; background: #f5f5f5; border: solid #666; border-width: 8px 0 2px 0; }

#inner-2 { padding: 10px 80px; margin: 10px auto; background: #ffffff; border: solid #666; border-width: 8px 0 2px 0; }

.yui-gf { margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid #ccc; }

/* //-- header, body, footer -- */

#hd { margin: 2.5em 0 3em 0; padding-bottom: 1.5em; border-bottom: 1px solid #ccc }

#hd h2 { text-transform: uppercase; letter-spacing: 2px; }

#bd, #ft { margin-bottom: 2em; }

/* //-- footer -- */

#ft { padding: 1em 0 5em 0; font-size: 92%; border-top: 1px solid #ccc; text-align: center; }

#ft p { margin-bottom: 0; text-align: center;   }

/* //-- core typography and style -- */

#hd h1 { font-size: 48px; text-transform: uppercase; letter-spacing: 3px; }

h2 { font-size: 152% }

h3, h4 { font-size: 122%; }

h1, h2, h3, h4 { color: #333; }

p { font-size: 100%; line-height: 18px; padding-right: 3em; }

a { color: #990003 }

a:hover { text-decoration: none; }

strong { font-weight: bold; }

li { line-height: 24px; border-bottom: 1px solid #ccc; }

p.enlarge { font-size: 144%; padding-right: 6.5em; line-height: 24px; }

p.enlarge span { color: #000 }

.contact-info { margin-top: 7px; }

.first h2 { font-style: italic; }

.last { border-bottom: 0 }

/* //-- section styles -- */

a#pdf { display: block; float: left; background: #666; color: white; padding: 6px 50px 6px 12px; margin-bottom: 6px; text-decoration: none;  }

a#pdf:hover { background: #222; }

.job { position: relative; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #ccc; }

.job h4 { position: absolute; top: 0.35em; right: 0 }

.job p { margin: 0.75em 0 3em 0; }

.last { border: none; }

.skills-list {  }

.skills-list ul { margin: 0; }

.skills-list li { margin: 3px 0; padding: 3px 0; }

.skills-list li span { font-size: 152%; display: block; margin-bottom: -2px; padding: 0 }

.talent { width: 32%; float: left }

.talent h2 { margin-bottom: 6px; }

#srt-ttab { margin-bottom: 100px; text-align: center;  }

#srt-ttab img.last { margin-top: 20px }

/* --// override to force 1/8th width grids -- */

.yui-gf .yui-u{width:80.2%;}

.yui-gf div.first{width:12.3%;}

[Get Code]

Save the above CSS file as "resume.css" in the same place as the HTML file.
In your saved HTML file, add two links to the CSS files

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" media="all" />

<link rel="stylesheet" type="text/css" href="resume.css" media="all" />

Use a browser to view the modified HTML file.

Activity 4:

Make the following HTML file.
Compare this HTML file with the previous one you made.
Use a browser to view this HTML file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

        <title>Jonathan Doe | Web Designer, Director | name@yourdomain.com</title>

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

        <meta name="keywords" content="" />

        <meta name="description" content="" />

        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" media="all" /> 

        <link rel="stylesheet" type="text/css" href="resume.css" media="all" />

</head>

<body>

<div id="doc2" class="yui-t7">

        <div id="inner">

                <div id="hd">

                        <div class="yui-gc">

                                <div class="yui-u first">

                                        <h1>Jonathan Doe</h1>

                                        <h2>Web Designer, Director</h2>

                                </div>

                                <div class="yui-u">

                                        <div class="contact-info">

                                                <h3><a id="pdf" href="#">Download PDF</a></h3>

                                                <h3><a href="mailto:name@yourdomain.com">name@yourdomain.com</a></h3>

                                                <h3>(313) - 867-5309</h3>

                                        </div><!--// .contact-info -->

                                </div>

                        </div><!--// .yui-gc -->

                </div><!--// hd -->

                <div id="bd">

                        <div id="yui-main">

                                <div class="yui-b">

                                        <div class="yui-gf">

                                                <div class="yui-u first">

                                                        <h2>Profile</h2>

                                                </div>

                                                <div class="yui-u">

                                                        <p class="enlarge">

                                                                Progressively evolve cross-platform ideas before impactful infomediaries. Energistically visualize tactical initiatives before cross-media catalysts for change. 

                                                        </p>

                                                </div>

                                        </div><!--// .yui-gf -->

                                        <div class="yui-gf">

                                                <div class="yui-u first">

                                                        <h2>Skills</h2>

                                                </div>

                                                <div class="yui-u">

                                                                <div class="talent">

                                                                        <h2>Web Design</h2>

                                                                        <p>Assertively exploit wireless initiatives rather than synergistic core competencies.  </p>

                                                                </div>

                                                                <div class="talent">

                                                                        <h2>Interface Design</h2>

                                                                        <p>Credibly streamline mission-critical value with multifunctional functionalities.      </p>

                                                                </div>

                                                                <div class="talent">

                                                                        <h2>Project Direction</h2>

                                                                        <p>Proven ability to lead and manage a wide variety of design and development projects in team and independent situations.</p>

                                                                </div>

                                                </div>

                                        </div><!--// .yui-gf -->

                                        <div class="yui-gf">

                                                <div class="yui-u first">

                                                        <h2>Technical</h2>

                                                </div>

                                                <div class="yui-u">

                                                        <ul class="talent">

                                                                <li>XHTML</li>

                                                                <li>CSS</li>

                                                                <li class="last">Javascript</li>

                                                        </ul>

                                                        <ul class="talent">

                                                                <li>Jquery</li>

                                                                <li>PHP</li>

                                                                <li class="last">CVS / Subversion</li>

                                                        </ul>

                                                        <ul class="talent">

                                                                <li>OS X</li>

                                                                <li>Windows XP/Vista</li>

                                                                <li class="last">Linux</li>

                                                        </ul>

                                                </div>

                                        </div><!--// .yui-gf-->

                                        <div class="yui-gf">

                                                <div class="yui-u first">

                                                        <h2>Experience</h2>

                                                </div><!--// .yui-u -->

                                                <div class="yui-u">

                                                        <div class="job">

                                                                <h2>Facebook</h2>

                                                                <h3>Senior Interface Designer</h3>

                                                                <h4>2005-2007</h4>

                                                                <p>Intrinsicly enable optimal core competencies through corporate relationships. Phosfluorescently implement worldwide vortals and client-focused imperatives. Conveniently initiate virtual paradigms and top-line convergence. </p>

                                                        </div>

                                                        <div class="job">

                                                                <h2>Apple Inc.</h2>

                                                                <h3>Senior Interface Designer</h3>

                                                                <h4>2005-2007</h4>

                                                                <p>Progressively reconceptualize multifunctional "outside the box" thinking through inexpensive methods of empowerment. Compellingly morph extensive niche markets with mission-critical ideas. Phosfluorescently deliver bricks-and-clicks strategic theme areas rather than scalable benefits. </p>

                                                        </div>

                                                        <div class="job">

                                                                <h2>Microsoft</h2>

                                                                <h3>Principal and Creative Lead</h3>

                                                                <h4>2004-2005</h4>

                                                                <p>Intrinsicly transform flexible manufactured products without excellent intellectual capital. Energistically evisculate orthogonal architectures through covalent action items. Assertively incentivize sticky platforms without synergistic materials. </p>

                                                        </div>

                                                        <div class="job last">

                                                                <h2>International Business Machines (IBM)</h2>

                                                                <h3>Lead Web Designer</h3>

                                                                <h4>2001-2004</h4>

                                                                <p>Globally re-engineer cross-media schemas through viral methods of empowerment. Proactively grow long-term high-impact human capital and highly efficient innovation. Intrinsicly iterate excellent e-tailers with timely e-markets.</p>

                                                        </div>

                                                </div><!--// .yui-u -->

                                        </div><!--// .yui-gf -->

                                        <div class="yui-gf last">

                                                <div class="yui-u first">

                                                        <h2>Education</h2>

                                                </div>

                                                <div class="yui-u">

                                                        <h2>Indiana University - Bloomington, Indiana</h2>

                                                        <h3>Dual Major, Economics and English &mdash; <strong>4.0 GPA</strong> </h3>

                                                </div>

                                        </div><!--// .yui-gf -->

                                </div><!--// .yui-b -->

                        </div><!--// yui-main -->

                </div><!--// bd -->

                <div id="ft">

                        <p>Jonathan Doe &mdash; <a href="mailto:name@yourdomain.com">name@yourdomain.com</a> &mdash; (313) - 867-5309</p>

                </div><!--// footer -->

        </div><!-- // inner -->

</div><!--// doc -->

</body>

</html>

[Get Code]

Activity 5:

Try to modify some color properties specified in the CSS file, and see the effects via the web browser.
What are the meaning of the following properties? Try to find out the answers yourself.

     padding: 1em 0 5em 0;
     margin: 2.5em 0 3em 0; 
     padding-bottom: 1.5em;
     padding: 10px 80px;
     margin-bottom: 2em;
     border: solid #666; border-width: 8px 0 2px 0;

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.

Acknowledgement

Special thanks to Sample Resume Template | A Free HTML Resume Template by thingsthatarebrown.com

HTML and CSS: Overview and Basic Concepts

Activity 1:

Activity 2:

Activity 3:

Activity 4:

Activity 5:

Activity 6:

Acknowledgement

References