Movatterモバイル変換

[0]ホーム
URL:

Getting Started with HTML and CSS

Published November 10, 2009 inHTML,CSS

My work involves building web pages. Not surprisingly, family and friendswho are playing with the idea of creating their own web site ask me for advice for getting started with HTML and CSS. This article is for them.

This article will help you set up your computer and explain what iscurrently considered by many to be the best way to build a web page withstyle using HTML and CSS. You may need to read this page a few times forthings to start making sense to you but you can do it!

Software Requirements

You need two pieces of software installed on your computer:

a web browser
You will be working with HTML and CSS to create web pages. Very old browsers did not understand CSS commands. Current browsers understand many CSS commands. In the future, hopefully browsers will understand all CSS commands. Internet Explorer is a browser but may be the worst for learning CSS. I recommend you getFirefox,Safari,Chrome orOpera as these four are all good browsers and free.
a text editor
HTML and CSS are typed in plain text files. You need a simple text editor program that can save plain text files. Notepad on Microsoft Windows or TextEdit on Apple Macintosh will work fine. (If you are using TextEdit read the Mac OS X FAQ at the bottom of this page.)

The Modern Approach

Just in case you've had some exposure to HTML before, the way HTML was used years ago is now considered a bit old-fashioned. Themain problem was HTML combined two functions into one file. First, anHTML file contained the "content" which is the actual text and picturesthat you want the people looking at your web page to see. Second, anHTML file contained the "presentation" which is how you would like thecontent too look (font size, font color, background color, ....).Having both content and presentation in one file makes it difficult tochange either the content or the presentation.

The modern approach is to use an HTML file to hold only the contentand it's structure (identifying which text is a heading, paragraph,list,...). A CSS file is used to hold the presentation(e.g. all headings should be red). When the two files are linked together we say theCSS file "styles" the HTML file. This separation of content andpresentation has important benefits:

  • It is easy for one person to work on the site content (HTML file) and another person can work on the presentation (CSS file).
  • One CSS file can be used to style many HTML files. If you want to change the design of many pages you only edit one CSS file!

Another important note, in case you've had previous exposure,is that the modern approach to web designdoes not use tables for laying out or organizing the content of a webpage. If you have never used tables to do layout then you are lucky.You can learn only the modern way using CSS which is sometimes called"tableless" or "table-free" layout.

To see the benefits of separation of content and presentation andtableless layout, visit css Zen Garden and selectdifferent designs. Just one click there convinced me the modern approachis the way to go!

Example

This basic example will show you what HTML and CSS files looklike and how they are linked together. After this example is workingthen you can learn what each line means.

The Example Folder

For this example to work the HTML file and CSS files must be savedin the same folder on your computer.

Somewhere on your computer (maybe the desktop) create a folder calledGettingStarted.

The HTML file

Now we write the HTML file which contains the content and itsstructure.

In theGettingStarted folder, create a plain text file calledexample.html with the following text:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"><html><head>  <title>Getting Started is the Hardest Part</title>  <link rel="stylesheet" type="text/css" href="style.css"></head><body>  <div>    <h1>HTML and CSS example</h1>    <p>Together, this HTML file and the CSS file show    the modern approach to web design. Content and    presentation have been separated. Div elements    are used for layout. If you want to change this    text you can edit this file (example.html). If    you want to change how this file is presented    you can edit the CSS file (style.css).</p>    <!-- This is a comment that will be ignored -->  </div>  </body></html>

The CSS file

In this example, the CSS file tells the browser how to presentthe HTML file with colours, fonts and font sizes.

In theGettingStarted folder, create a plain text filecalledstyle.css with the following text:

body {  font-family: verdana, arial, helvetica, sans-serif;}h1 {  font-size: 180%;  color: white; }/* This comment will be ignored. */p {  color: black;}#container {  background: red;}

Validate HTML & CSS

You do not have to do this step but it is a good way to find typosand to make sure you have structured the documents properly.

The w3c organization decides what is and what is not HTML and CSS.They have web pages where you can upload your files and check if theyare valid HTML or CSS. The validator pages will check your files andreport anyerrors or warnings.

Go to theHTML validation page. Use the "Validate By File Upload" section. Click the "browse" (it may becalled "Choose File" depending on your browser) button to locateexample.html on your computer. Then click the "Check" button.If you see green on the results page then your HTML page is ok. Red meansyou have something to fix and the results page will even tell you whichline contains the error.

Go to theCSS validation page.Use the "By File Upload" section. Click the "browse" button to locatestyle.css on your computer. Then click the "Check" button.If you see green on the results page then your CSS is ok.

View Your Page

Start your web browser.

Use the browsers menu (File>Open File...) to open theexample.html file on your computer. You should seethis red block with a white heading and black paragraph text:

a screen shot of what the example looks like

Congratulations! You just built a web page!!

Example Explained

This section explains the main ideas of the example andthen what each line means.

Basic structure of the HTML

The basic structure of any HTML document is shown below.This is always the same but more things are added to it.

<html><head></head><body></body></html>

The head element starts with the<head> tagand ends with the</head>tag. The things that are in the head element are a bit likeprogramming. They are not the things that you want the person lookingat your website to see (except for the title of the web page.)

The body element starts with the<body> tag and ends with the</body> tag. The things thatare in the body are the things like text and images that you wantthe person looking at your website to see.

The head and body elements must be inside the<html>and</html> tags.

Each line of the HTML

Now I will explain what each line does inexample.html

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

Tells the browser what type of document it is reading.In this case, the document is HTML Strict which is the most modern type.You can learn more about this line after you learn more basic HTML and CSS.

<html>

The html element contains the head and body elements. The htmlelement starts with the<html> tag.

<head>

Starts the head element.

<title>Getting Started is the Hardest Part</title>

This is the title that appears at the very top of the window andwhen the user makes a bookmark for your great web page. You canchange this and see what happens.

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

Tells the browser to use thestyle.css file to decidewhat colors, fonts, etc for the things that will be displayed in the browser

</head>

Tells the browser we are at the end of the head element

<body>

Starts the body element. You can change everything that is writtenin the body element. You can change the order of these things and seewhat happens. You can make more headings, paragraphs and comments andsee what happens.

<div>

This starts a div elementidentified by "container".A div element is alayout section that you can control with the CSS file. In this examplethe only thing that the CSS file does with this div is make thebackground red. It will take a while for you to learn about how to usediv elements. You can removethe<div> and</div>tags and the red background will disappear.

<h1>HTML and CSS example</h1>

A heading.h1 means Heading 1. Try adding some moreheadings to this web page. You can also have sub headings calledh2,h3,h4...

<p>Together, this HTML file and the CSS file show the modern approach to web design. Content and presentation have been separated. Div elementsare used for layout. If you want to change this text you can editthis file (example.html). If you want to change how this file is presented you can edit the CSS file (style.css).</p>

A paragraph.p means paragraph. Try adding some more paragraphs to this web page.

<!-- This is a comment that will be ignored -->

A comment is anything between<!-- and-->.The browser will ignore this and the person looking at the web pagewill not see it (unless they know how to view the source of your web page.)Comments are useful if you want to make a note toyourself while you create the web page. Try adding some more commentsto this web page. You can put comments anyhwere in this file.

</div>

The end of the div element.

</body>

The end of the body element

</html>

The end of the html element.

The CSS file

body {  font-family: verdana, arial, helvetica, sans-serif;}

Tells the browser to display all the text inside the<body></body> tags inthe Verdana font. If the computer that the browser is on doesnot have Verdana then the browser will use Arial. If Arial isnot available the browser tries Helvetica. If none of theseare available the browser tries any sans-serif font.

h1 {  font-size: 180%;  color: white; }

Tells the browser to display anything in<h1></h1> tags bigger and in white. Try adding thislinefont-style: italic; inside the braces.

/* This comment will be ignored. */

In a CSS file comments start with/* and end with*/

p {  color: black;}

Tells the browser to make all paragraph text black. Try addingfont-weight: bold;

#container {  background: red;}

Tells the browser to make the background red for the divelement called "container". Try addingborder: 1px solid black;

Learn More

As you learn more about HTML and CSS you can keep returning to theexample above. The basic structure of the example will almost always bethe same. Inexample.html you can edit the text between the<title></title> tags and between the<body></body> tags. You can also editeverything in thestyle.css file.

The web is full of tutorials on HTML and CSS. While reading web tutorialsthere are a few things to keep in mind:

  • They might be old.
  • They might use<table></table> tags for layout. To follow the modern approach you probably will not be using<table></table> tags unless you are reporting something like a table of experimental data.
  • If the page is about XHTML then run away. XHTML was a still born technology that just didn't catch on enough to be useful.

Here are some links that will help you understand what happened inthe example above. I recommend you start at the top of this list andwork down.

Microsoft Windows FAQ

When I look at the HTML and CSS files in the desktopfolder I cannot see the.html and.cssfile extensions. How do I make the file extensions visible?

Life is a lot better with file extensions turned onfor all your files. It is better to see the whole name than have partof it hidden.

  1. Use the Start menu and select Start>Settings>Control Panel
  2. Double click the "Folder Options" icon
  3. Click the "View" tab
  4. Scroll down the list and uncheck the "Hide extensions for known file types" checkbox
  5. Click the "ok" button

Now you should see the file extensions on all your files everywhere.

What is a better text editor for HTMLand CSS development on Windows?

There are many free and commercial editors available. You might like to tryPSPad which is free.

Apple Macintosh FAQ

When I try to save a text file in TextEdit I can onlysave it in.rtf format. How can I save in plain text formatwith the.html or.css file extension?

Before you try to save the file in TextEdit you mustset the file to plain text mode:

  1. In TextEdit choose the menu Format>Make Plain Text
  2. If you are asked if you want to convert document to plain text then click ok. After this step the formatting toolbar disappears in your document's window.
  3. Choose File>Save
  4. Type the file name you want with the.html or.css extension in the name
  5. Make sure the "hide file extension" checkbox is not checked
  6. Click the "save" button
  7. You will be asked if you want to append the.txt extension. Check the "Don't append" button

TextEdit is probably not the best text editor for web design.

When I open the.html file in theTextEdit it is not plain text. What happened? How can I fix it?

TextEdit is displaying your.html filelike a web browser would. Sort of. To open the.html filein plain text mode do this:

  1. Start TextEdit
  2. Choose the menu File>Open
  3. Select the file you want to open
  4. Check the "ignore rich text commands" checkbox
  5. Click the "Open" button.

Now you should see all of the HTML as plain text.

What is a better text editor for HTMLand CSS development on Mac OS X?

There are good commercialeditors likeTextMate whichI use frequently.

When I look at the HTML and CSS files in the desktopfolder I cannot see the.html and.css fileextensions. How do I make the file extensions visible?

Life is a lot better with file extensions turned onfor all your files. It is better to see the whole name than have partof it hidden.

  1. On the Dock click the Finder button or click on the desktop to activate Finder
  2. In the menu bar at the top of the screen choose Finder>Preferences...
  3. Click the advanced icon
  4. Check the "show all file extensions" check box
  5. Close the preferences window

Now you should see the file extensions on all your files everywhere.

Comments

Have something to write?Comment on this article.

© 2006-2018 Peter Michaux
[8]ページ先頭
©2009-2025 Movatter.jp