MEDP150 - Lab 10
Lab: Basic html structure tags, and making an HTML page. IF there is time, also basic idea of site management and site architecture.
NOTE: there is reading on the bb site, and also lots of links to HTML tutorials.
PART ONE:
Look at basic html layout, with idea of elements, attributes, and values
TAGS:
<html> declares an html document
</html> ends an html document
<head> marks beginning of ‘header’ element
<title> marks beginning of ‘title’ element
<body> marks beginning of ‘body’ element
<p> marks beginning of a ‘paragraph’ element
Elements declare the structure. A closing tag is required or page won’t read.
<img> is an element. In the tag <img src=”myphoto.jpg”/> src is an attribute and myphoto.jpg is a value. Values go in quotes.
You could add more, e.g. <img src=”myphoto.jpg” width=”300px” />
Then look at how html rules work for specifics. Talk about color and fonts (with the idea that they will modify those on their site next lab.)
<body bgcolor=”blue”> also HEX colors if you have time.
EXERCISE: Making a simple page. (In order to actually have them write the whole page, I want you to use a workaround. USE MS Word, save the file as a text file with no line breaks. (.txt) Then, I want them to go to the Finder, make a copy of the file using the Duplicate command, and change the file extension from .txt to .html. Then show how to open the file in the browser. If you have a better workaround, let me know. I used to use Macintosh Text Edit, but it now doesn’t seem to allow for saving in .txt, and it has an html save that adds all the structure automatically, which is exactly what I don’t want. Of course what you get when you do use their html feature is a bunch of arcane DOCTYPE and Character set info, which in real life you need, so we will make html pages using TextEdit or Dreamweaver in the future.
Have students modify the page. Use <font><body bgcolor = “ “> and any other commands you have time for. I would emphasize structural tags, such as <H1>
If there is an easily available image, they could insert an image as well.
URLS - go over idea of relative and absolute URLs. How you can use relative URLS internally in your site design, but absolute ones for stuff not on the site.
Have them add a hyperlink to their site using <a href= “http://mysite.net” CLICK FOR MY SITE </a>
FOR NEXT LAB (number 11 by my count.) unless you have extra time.
Talk about ORGANIZING, e.g. an HTML folder, an IMAGES folder, a STYLES folder, an INDEX page.
SITE ARCHITECTURE - Have them draw up the site map of their current site...
More details to follow...
WEB RESOURCES
The World Wide Web Consortium is the governing body with authoritative info on all things to do with the Web. They feature HTML and CSS tutorials, as well as a Validator, for checking your HTML.
http://www.w3.org/MarkUp/Guide/
Webmonkey has a variety of resources, including an HTML cheatsheet:
http://www.webmonkey.com/reference/HTML_Cheatsheet
Here are some other HTML tutorial sites:
http://en.wikiversity.org/wiki/HTML
http://html.net/tutorials/html/
http://htmldog.com/
Lab: Basic html structure tags, and making an HTML page. IF there is time, also basic idea of site management and site architecture.
NOTE: there is reading on the bb site, and also lots of links to HTML tutorials.
PART ONE:
Look at basic html layout, with idea of elements, attributes, and values
TAGS:
<html> declares an html document
</html> ends an html document
<head> marks beginning of ‘header’ element
<title> marks beginning of ‘title’ element
<body> marks beginning of ‘body’ element
<p> marks beginning of a ‘paragraph’ element
Elements declare the structure. A closing tag is required or page won’t read.
<img> is an element. In the tag <img src=”myphoto.jpg”/> src is an attribute and myphoto.jpg is a value. Values go in quotes.
You could add more, e.g. <img src=”myphoto.jpg” width=”300px” />
Then look at how html rules work for specifics. Talk about color and fonts (with the idea that they will modify those on their site next lab.)
<body bgcolor=”blue”> also HEX colors if you have time.
EXERCISE: Making a simple page. (In order to actually have them write the whole page, I want you to use a workaround. USE MS Word, save the file as a text file with no line breaks. (.txt) Then, I want them to go to the Finder, make a copy of the file using the Duplicate command, and change the file extension from .txt to .html. Then show how to open the file in the browser. If you have a better workaround, let me know. I used to use Macintosh Text Edit, but it now doesn’t seem to allow for saving in .txt, and it has an html save that adds all the structure automatically, which is exactly what I don’t want. Of course what you get when you do use their html feature is a bunch of arcane DOCTYPE and Character set info, which in real life you need, so we will make html pages using TextEdit or Dreamweaver in the future.
Have students modify the page. Use <font><body bgcolor = “ “> and any other commands you have time for. I would emphasize structural tags, such as <H1>
If there is an easily available image, they could insert an image as well.
URLS - go over idea of relative and absolute URLs. How you can use relative URLS internally in your site design, but absolute ones for stuff not on the site.
Have them add a hyperlink to their site using <a href= “http://mysite.net” CLICK FOR MY SITE </a>
FOR NEXT LAB (number 11 by my count.) unless you have extra time.
Talk about ORGANIZING, e.g. an HTML folder, an IMAGES folder, a STYLES folder, an INDEX page.
SITE ARCHITECTURE - Have them draw up the site map of their current site...
More details to follow...
WEB RESOURCES
The World Wide Web Consortium is the governing body with authoritative info on all things to do with the Web. They feature HTML and CSS tutorials, as well as a Validator, for checking your HTML.
http://www.w3.org/MarkUp/Guide/
Webmonkey has a variety of resources, including an HTML cheatsheet:
http://www.webmonkey.com/reference/HTML_Cheatsheet
Here are some other HTML tutorial sites:
http://en.wikiversity.org/wiki/HTML
http://html.net/tutorials/html/
http://htmldog.com/