We have started practicing with basic HTML code using just Notepad or Notepad ++ and previewing our work in a browser.
We will continue with that for a little while until you’re ready to begin your next project.
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.
We have already begun practicing with some very basic HTML tags and will continue to do so today.
What is all of this??
<!DOCTYPE HTML>
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. The above code is for HTML5.
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 on this website.
You will see this in the very top area of your browser window or tab.
<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.
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.
“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”).
We will use W3schools.com as a resource. We will also use w3fools.com and htmldog.com.