Class Dec. 2-Dec.6, 2013 – MHS Web Design

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.

Also, Code Guy shows us the parts of a webpage and where they belong.

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. (Wait, what is that?)

More info: http://www.w3schools.com/html/html_intro.asp

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.

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.

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.

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:

Paragraph tags. Example:

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.

Bold text. Example: MHS Web Design

Italicized text. Example: MHS Web Design

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:

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

Favicons

Finally, let’s add a favicon to our page. Favicons are the tiny icons that appear on the top left next to a website’s name and URL.

First, you must design your favicon in some kind of image editor such as Photoshop. You might also be able to find free favicon generators online. Try this website: http://favicon-generator.org/. It will take a picture or graphic you have and turn it into a favicon. The picture must be a perfect square (same length and width). To do this open up your image with either Photoshop or whatever image editor you have on your computer and crop and resize your image to make sure it’s the same length and width. If you want, click here to download the Mustang logo to use (it is a perfect square).

If you don’t use an image that is a perfect square you will end up with a distorted favicon because the favicon it generates will be 16 pixels by 16 pixels.

Again, pay attention to file name and file type. Save your favicon as favicon.ico and save it in the same place as your index file (desktop or My Documents).

Now that you have created your favicon, step two is adding code to your webpage.

Add this to your head section:

(If you copy and paste this, you will have to delete the quotation marks and add them again in Notepad++)

Once you have done that, save your index file and refresh the browser. Hopefully you will see your new favicon!