Learning HTML and CSS
HTML and CSS are the language of the internet. Working together, they tell a browser (Firefox, Internet Explorer, Chrome, Safari) how your website should look. They control things like what your text looks like, the font, the layout of the page, etc.
Today you are going to begin to learn some very basic HTML tags. We will use Notepad and Firefox. You will need to save your work in your folder on your computer.
To begin:
1. Open up Notepad on your computer
2. Copy and paste the following:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta name=”description” content=”Short description or sentence about your website” />
<meta name=”keywords” content=”keyword 1, keyword 2, keyword 3, etc.” />
<title>Title of the webpage</title>
</head>
<body>
This is where all of your content goes- text, pictures, video, links, etc. This is basically what everyone sees.
</body>
</html>
3. Save your Notepad file as index.html
You can see how your webpage will look as you work on it by previewing it in your browser.
To preview your file in Firefox:
1. With Firefox open, go to File, Open File, navigate to your file in your folder, and click on it
OR
2. Go to your file on your computer by opening up the folder and then double-click on your file. It should automatically open in Firefox if you saved it correctly.
It probably doesn’t look like much but it’s a start!
What is all of this??
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
This is always the very first thing in a webpage. It basically tells the browser what version of the markup language the page is written in. This is critical and necessary so the browser will display the webpage correctly. You will find most webpages have the above code. When creating your own webpage just copy and paste it.
More info: http://www.w3schools.com/html/html_doctype.asp
<html></html>
This is the very first and very last html tag your webpage will have. It’s basically telling the browser this is an HTML document and should be read accordingly. <html> is your very first tag and </html> is your very last tag. All of your content MUST be between these two tags or it will not display correctly.
<head></head>
The head tag generally contains information that will not be visible on your webpage, with the exception of the title, which appears in the very top of your browser.
<title></title>
The title tag is where the title of your website goes. For example: MHS Web Design
<meta name=”description” content=”Short description or sentence about your website” />
This is where you write a short description of what your website is. For example: This website is for the MHS Web Design class at Medford High School.
<meta name=”keywords” content=”keyword 1, keyword 2, keyword 3, etc.” />
This is where you put a list of keywords that are related to your website. This is to help people find your site in internet searches. For example: MHS web design, Medford High School, Medford, MA.
<body></body>
These two tags are very important and will be close to your first and last tags, the <html></html> tags. Everything that is visible will be in the <body></body> section.
These tags are the basics of any webpage and you will come across them pretty much everywhere.
Basic HTML tags
Most HTML tags come in pairs:
<p></p> Paragraph tags. Example:
<p>The Medford Public Schools is a caring educational partnership of school, family and community designed to ensure that all students are afforded a safe and healthy learning environment in which they develop the knowledge, skills and attitudes to reach their full academic and personal potential. This partnership is dedicated to providing all students with a 21st century education that will enable them to be life-long learners and contributors to a diverse and rapidly changing world.</p>
<strong></strong> Bold text. Example: <strong>MHS Web Design</strong>
<em></em> Italicized text. Example: <em>MHS Web Design</em>
<br /> Adds a line break (skips to next line).
<a href=”http://www.medfordpublicschools.org/”> This is a link to the Medford Public Schools webpage. Example:
<a href=”http://www.medfordpublicschools.org/>Click here to go to the Medford Public Schools website</a>
To open a link in a new window or tab:
<a href=”http://www.medfordpublicschools.org/” target=”_blank”>
<img src=”picture.jpg” /> Code for adding an image. You can have .jpg, .gif, .png, etc.
More HTML tags to try today:
<p><b>This text is bold</b></p>
<p><strong>This text is strong (bold)</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
Copy and paste these in your file to see what they do to your text.
“Nesting” HTML tags
Look at the examples above. Each example has a paragraph tag and another tag inside it. Notice how the paragraph tag is “opened” first and “closed” last while the other tags are closed in between the paragraph tags. HTML tags are always closed in reverse order, like this: <1><2></2></1> or <1><2><3></3></2></1>
List of HTML tags
http://www.w3schools.com/tags/default.asp
Note: some of these tags won’t be supported in HTML (wherever it says “deprecated”).