7/2: Intro to HTML
HTML: “Hypertext Markup Language”; A universal computer language that can be read by all computers connected to a browser. This language allows for the formatting of text, graphics, and other media.
Definitions to be familiar with:
- Browser: A program that can interpret HTML and display a formatted document on the screen. (ie: Safari, Firefox).
- Hyperlinks/Hypertext: Active elements such as text or graphics embedded within a web page’s HTML code that connect (by clicking) to other related web information such as a new web page.
- Tag: A command inserted between the open bracket < > close bracket signs that specifies how a portion of an HTML document is formatted. The backslash before a command </___> indicates a closing tag.
- Domain Name: The name of a website (ie: Apple.com, Yahoo.com).
- Absolute Link: A link to a webpage/website outside of your own site (ie: http://www. ccsf.edu)
- Relative Link: A link to a webpage within your own website (ie: page2.html).
- URL: “Uniform Resource Locator”: the full address of a site or page on the Internet.
IMPORTANT HTML REMINDERS:
- Create a ROOT FOLDER: 1 web folder for ALL html files. ALL images (.gif & .jpg.) and .html files must be saved here.
- The first page of your HTML page is always named “index.html”. Most web servers recognize this as the default home page & will load it automatically.
- All web pages in your site will have the file extension “.html”. A common abbreviation of this is “.htm”, which originated with older operating systems. Both forms are widely supported by browsers.
- No spaces in file naming. Use _ if space is absolutely needed.
- Be consistent in your coding (all lower case).
- When previewing your page in the browser, remember to ’save’ (Apple + S) your HTML document after each code change and ‘refresh’ (Apple + R) on the browser.
Get Started
1. Launch the browser (ie: Firefox) and visit your favorite website. You can view the code of any page by going to >View >Page source
2. Re-size the Browser page to half the computer screen.
3. Open the program Text Edit: >Applications >Text Edit
***Set Preferences in Text Edit BEFORE opening a new window:
1. >Text Edit >preferences (you only have to do this once)
2. check “plain text”
3. check “ignore rich text commands in HTML files
4. choose “Open : Western (Mac OS ROMAN)”
5. uncheck all other boxes
6. close this window and open a new document (changes do not affect already opened doc.)
ESSENTIAL TAGS and Definitions-(8) Core tags
<html> identifies a text document as HTML.
<head> contains descriptive info about the page, including title and meta tags.
<title> appears in top bar , browser uses this when creating a bookmark.
*INSERT TITLE CONTENT HERE*
</title> close the title tag.
</head> close the head tag.
<body> the main content of your page.
*INSERT TITLE CONTENT HERE*
</body> close body tag.
</html> the last tag of your weebpage, denoting the end.
More tags, to be inserted within the <body>
<body bgcolor=”___insert color name or Hex code #_”>
background color: add a color name such as yellow- or- insert the HEX CODE # . See website on Hex Color Codes below.
<font face=courier size=”__insert #_” color=”____”>
select font size #1-7, default is ‘3′ and select font color -or- enter Hex Code #
<h3 align=”center”>
creates a header: #1(biggest)-6, alignment can be “center” or “right”, default alignment is left.
<p> your content here </p>
creates a paragraph break between text or images; close the </p> tag on the same line for proper coding.
<br>
creates a line break between text or images.
<hr>
creates a line/horizontal rule.
<img src=”____.gif/.jpg”>
Insert an image that has already been compressed and placed in your Root Folder. File name must be exact. Use only .jpg or .gif. Image file size should ideally be under 25k.
<img src=”____.gif/.jpg” width=”____” height=”____” border=”1″>
alter an image size by including the pixel width/height in this tag -or- alter in Photoshop.
<a href=”http://www._______.___”> INSERT CONTENT such as the name of the website </a>
absolute link/outside website; a 3-part tag. Anchor tags should be on the same line for proper coding.
<a href=”______.html”> INSERT CONTENT such as the name of the page </a>
relative link/links to another page WITHIN your site; a 3-part tag. Anchor tags should be on the same line for proper coding.
<a href=”http://www.___.__”> <img src= “____.gif/.jpg”> INSERT CONTENT such as the name of the website/webpage </a>
use an image as a link; a 4-part tag.Anchor tags should be on the same line for proper coding.
<a href=”mailto: your email address here”>INSERT CONTENT such as email or contact </a>
email link; this will open the email program installed on your computer. In this classroom, it is the application “Mail”;a 3-part tag.
Emphasis Tags: Add emphasis to specific words/letters; close </> tag to end the command.
<i> INSERT CONTENT </i>
itallic
<b> INSERT CONTENT </b>
bold
<u> INSERT CONTENT </u>
underline
<tt> INSERT CONTENT </tt>
creates teletype; resembles the font Courier
<blockquote> INSERT CONTENT…text will wrap around, including a left and right margin. Works best with short paragraphs </blockquote>
creates a left and right margin around text; works best with short paragraphs.
In Class-Assignment: HTML website
Create a 2-page website using HTML hand coding based on a topic of your choice. If you are stumped, create a website for your class projects.
Requirements for Each Page:
-
2 different .jpg or .gif images (4 total)
-
2 Relative Links (index page links to page 2 and back)
-
3 Absolute links (all different; 6 total)
-
Email link
-
Blockquote example
-
Header example
-
Emphasis tag examples
Links:
Basic Website Design Tutorial
http://library.albany.edu/imc/webdesign/
HTML Cheatsheet
http://www.webmonkey.com/reference/HTML_Cheatsheet#Basic_Tags
Online HEX Color Codes
www.webmonkey.com/reference/Color_Charts
Leave a Reply