HTML NOTES
How the internet works...
The Internet is a network of networks that allows for communication and sharing of information. The World Wide Web is just one of several applications which can be used on the Internet.
Web Terminology
• FTP (File Transfer Protocol), SFTP (Secure File Transfer Protocol) - allows computers to exchange files over a network
• HTML (HyperText Markup Language) - the "programming" language used to write web pages
• HTTP (HyperText Transfer Protocol) - the internet protocol which allows web pages to work
• Protocol - ground rules or "language" that internet computers use to "talk" with each other
• Source file - the set of tags and text which make up a web page. Browsers process the source file to make the web page look the way the designer wanted it to look.
• URL (Uniform Resource Locator) - a web address; indicates the location of a web resource as well as the protocol needed to access it
• Web browser/navigator/client - the software application which displays web pages
• Web page - a single page on the web (a "homepage" is the first web page on a web site)
• Web server - the computer or network of computers which stores web pages
• Web site - a collection of web pages, usually on a particular topic or business
How web pages work…
1) Client (user) tells the browser to request a web page using the http protocol
2) Request goes over the internet to the web server
3) Web page is found on the web server
4) Copy of the source code for the web page is sent back to the original computer
5) Browser processes ("translates") code into web page
The Internet
Client (user) Server
How does it work?
Web pages are simply made up of plain ASCII text. Web browsers process the codes used on web pages to display a fully formatted web page. But the pictures, colors, and other non-text items on a web page aren't actually on the web page itself – the web page itself is simply text, with the formatting and graphics encoded. You can look at the code for any web page by going to the "View" menu and choosing "Page Source".
Introduction to HTML
• HTML stands for "HyperText Markup Language"
• HTML is a collection of text surrounded by tags which modify the text of the document.
• All tags are encoded in angle brackets (>).
• Tags work in pairs -- one turns on the modification, one turns it off. Stop tags look just like start tags except they have a slash (/) in front. <tag>affected text</tag>
• Some tags work on their own. Since they don’t have a closing tag, we place a / at the end of the tag. The Horizontal Rule tag <hr /> is an example.
• Most tags have attributes which can modify how they function:
<tag attribute="value">affected text</tag>
Tag examples
emI want this in italics</em> is processed by the browser to look like: I want this in italics
<p align="center">I want this new paragraph to be centered</p> is processed by the browser to look like:
I want this new paragraph to be centered 8
Structural tags
• These are the basic tags which must be a part of every web page. They tell the browser that the document is a web page.
html> <head> <title>Title of Webpage</title> </head> <body>
This is where the main part of the web page would go
</body> </html>
Breaking Lines and Paragraphs
•<p> text texttext </p> –Paragraph tag
–Most browsers render (process) this with blank lines between each paragraph
•<br /> –Line break tag. Used when the webmaster wants a carriage return but doesn't want a blank line to follow
•<hr /> –Horizontal Rule. Used to place a straight line across the page.
Breaking Lines and Paragraphs
•<p> text texttext </p>
–Paragraph tag
–Most browsers render (process) this with blank lines between each paragraph
•<br />
–Line break tag. Used when the webmaster wants a carriage return but doesn't want a blank line to follow
•<hr />
–Horizontal Rule. Used to place a straight line across the page.
Header Tags
Header Tags -- Used for marking sections and subsections in a document. Using Cascading Style Sheets (CSS), you can change the default meaning for the tags.
<h1> Header 1 -- Giant-sized and bold </h1> <h2> Header 2 -- Large and bold </h2> <h3> Header 3 -- Normal-sized and bold </h3> <h4> Header 4 -- Small and bold </h4> <h5> Header 5 -- Very Small and bold </h5> <h6> Header 6 -- Tiny and bold </h6>
Formatting text
• Bolding and Italicizing: – <strong>text you want bold</strong>
<b> you can also use the bold tag (no longer recommended) </b>
– <em>text you want in italics</em
i> you can also use the italics tag (no longer recommended) </i
• Aligning text or graphics left/center/right:
– <p align="left">new paragraph justified left</p>
– <p align="center">new paragraph centered</p>
– <p align="right">new paragraph justified right</p
Linking Documents
• One of the really exciting things webmasters can do is link their web page to another's.
• To do this, webmasters use a pair of anchor tags:
<a href="URL">text to become clickable hotlink</a>
A = Anchor
HREF = hypertext reference
URL = Uniform Resource Locator
(a web address, such as
More on linking documents
• Things to know about links:
– Case counts for the URL
– The URL must be exact
– You must have something in the "text to become clickable hotlink" section for the link to work
File Transfer Protocol
• FTP (File Transfer Protocol) is used to publish web pages by copying the HTML source files from your computer to the server computer.
• Some web servers will no longer allow you to use FTP and instead require SFTP (Secure FTP) or SSH (Secure Socket Shell). But the concept is the same -- you create your web page on your computer, then copy them to the server computer.
Colors
• Web colors are specified by HEXADECIMAL code which describes the RGB value. RGB stands for RED GREEN BLUE. These are the primary colors that make up all other colors. The hexadecimal code includes two characters for each color. Hexadecimal codes have the format: #RRGGBB
• Examples: White = #FFFFFF, Black = #000000,
Red = #FF0000, Green = #00FF00
• Browsers greater than version 3 can also correctly process 256 named colors (red, white, black, turquoise, periwinkle, etc.)
Ref:
Using Colors on Web Pages
One way you can setting colors for the entire page is to modify (by adding attributes to) the <BODY> tag:
<body bgcolor="red" text="yellow" link="green" alink="black" vlink="purple">
BGCOLOR = modifies background color
TEXT = modifies text color
LINK = modifies link color
VLINK = modifies viewed link color (links that have been visited)
ALINK = modifies active link color (color that occurs the split second a user is clicking on a link)
Cross-platform color issues
• Different systems have different color cards & monitors and aren't calibrated to each other
• Even within the same system, color cards and monitors, the user can set their options .and change the look of their displays
• Macs tend to be brighter than Windows
• Strive for contrast and value balance
BAD EXAMPLE:
GOOD EXAMPLE:
Fonts
• Designers can also specify the font they wish to use on the page. One way to do this is to use the <font> tag. However, the W3C has recently decided to deprecate both the <font> tag and the use of the bgcolor attribute -- instead, they want us to start using style sheets. More on how to use style sheets in the next couple of slides. That said, many web sites today still use the <font> tag.
• Not all systems have the same fonts. If you choose a font that isn't on the user's system, the page won't look the way you prefer.
<font face="FONTNAME"> [text] </font>
• The default font for browsers is Times. This is a SERIF font. Another popular choice is Arial. This is a SANS-SERIF font. Another type of font is MONOSPACE, such as Courier.
• One way to avoid the issue of conflicting or missing fonts is to specify the type of font, rather than the actual font, such as:
<font face="sans-serif"> [text] </font>
• Another way is to put more than one font into the tag. The browser will check to see if the computer has the font in order:
<font face="Palatino, Arial, sans-serif"> [text] </font>
Other Font Attributes
• SIZE = "number": 1 = smallest, 7 = largest
<font size="1">Small size</font>
Small size
• COLOR - changes text color (use either hexadecimal code or named color)
<font color="red">Red</font>
Red
Combining Font Attributes:
<font face="comic sans ms" color="yellow" size="7">Comic Sans MS,
Yellow, Size 7</font>
Comic Sans MS, Yellow, Size 7
Using Cascading Style Sheets
• Cascading Style Sheets allow you to customize the look of your pages by creating a style for these pages and then change the look of the entire site by making one change in one document. Style Sheets are well known to "power-users" of MSWord and Adobe Pagemaker. This same level of ease and control works on the web.
• Style sheets work by allowing you to define properties for how HTML elements (tags) appear when viewed in a Web browser. For example, you can set it up so that every
<h1> on your page appears in green, Arial, 18 points, and italics – automatically (instead of big and bold, which is the default state of h1).
H1 Example
• If in the future you decide they should all be blue, then you just change it in one place and they can be updated throughout your site.
H1 Example
Week 2 Slide 16 of 22 CS21: Web Site Design
How do style sheets work?
• Suppose you want to create that page where every <h2> tag is green, italicized, and in Arial font. Before CSS came along, you would have to write the following every time the <h2> tag was used.
<h2<i<font face="Arial" color="green">This is a green, italicized, Arial H2</font</i</h2>
• Now, you can simply specify this in a single step by typi.ng something like this:
h2 {font-family: Arial; font-style: italic; color: green; }
• Then in the body of the document, you simply use the <h2> tag as usual. When the page is viewed, all the <h2> tags will appear as you wished them to automatically.
• If later you do decide you want the <h2>s to suddenly be blue instead of green, you simply change the style sheet command to be blue instead of green.
• You can set up styles for every HTML tag. This is done either by placing the styles in the <head>, by using an inline style, or by placing the styles in an external style sheet.
Defining styles: head
• You can set a style sheet for a single document by putting the style information in the head of the document.
head> <style type="Text/css">
<!-- h1 {faont-maily: Arial; font-style: Italic; color: green;} -->
</style> <head> <body>
<h1> This is soooooooooooooooCooooooooooool </h1> <p> nothing cooooool here </p>
<h1> this one is cool toooooooooooooo<h1> </body>
The actual style information is included in an HTML comment tag (<!—commented text -->) in order to hide it from browsers that don't understand CSS. The TYPE attribute of the <style> tag defines the type of style sheet being used -- in this case CSS, Cascading Style Sheets.
Defining Styles: inline
You can also simply include the style information in a particular tag right in the document by adding the STYLE attribute to the tag directly.
body
<h1 style="faont-maily: Arial; font-style: Italic; color: green;">
This is soooooooooooooooCooooooooooool </h1>
<p> nothing cooooool here </p>
<h1> this one is cool toooooooooooooo<h1>
</body>
</html>
This particular method is most useful if you want to change a single instance of a tag in a document that already has a style associated with it. When there are multiple styles affecting a document, the style closest to the tag in question takes precedence. In other words, if I have put astyle in HEAD of the document but also included an INLINE style, that INLINE style will override the document style for that one instance of the tag.
To set a style for an entire site of documents, create a standalone text file with a .css extension (e.g., basic.css) that contains the necessary style information. Then, link each web page to that CSS file using either the <link> tag or the import method
Text that appears in the basic.css style sheet document
h2 {font-family: Arial; font-style: italic; color: green;}
p {font-family: Courier; font-style: bold; color: red; }
HTML document, using the <link> tag method
head
<link rel="stylesheet" type="text/css" href="basic.css" /> </head>
HTML document, using the import method
head
<style type="text/css">
<!-- @import url("basic.css"); --> </style>
</head>
Classes and IDs
• Classes and IDs are ways for you to pre-define particular features.
• Suppose you wanted to create a style to allow parts of a web page to be highlighted.
• You can create such a style by creating either a class or an id, defining that class or id, and then referencing that class or id when you want it to be used.
• Classes can be used more than once on a web page; an id should only be used once per web page. Classes are preceded by a "." (dot). IDs are preceded by a "#".
head> <style type="Text/css">
<!—highlight { background-color: #cccccc; } -->
</style> <head> <body<p> this paragraph is not highlighted. </p> <p class="highlight"> this paragraph is highlishted.</p> </body> </html>
Span and div
• You can also use classes and ids with <SPAN> and <DIV> tags. These are container tags with minimal formatting associated with them. You can set up a <SPAN class="whatever"> to attach a style to specific letters or words. The <DIV> tag will start on the next line and start a new line after itself and is used to attach a style to larger bodies of text or graphics.
type here page 21
head
<style type=”text/css”>
<!—#brighttext {color: #00ff00; font-weight: bolder;}
.periwinklebluetext {color: #6699ff;}
</style>
</head>
body
I love Pakistan<br/>
We should love our beloved country<br/>
<div id=”brighttext”>
Yes Sir! Yes Sir!
</div>
Three bags full.br/>
<span class=”periwinklebluetext”>one</span> for my master. <br/>
<span class=”periwinklebluetext”>one</span> for my dame. <br/>
<span class=”periwinklebluetext”>one</span> for the little boy,br/>
Who lives down the lane.
</body> <html>
Week Agenda
• Using Special Characters • Using Graphics on web pages • Types of web graphics • Using existing web graphics • Creating web graphics • Background graphics Special Characters • Because the source codes for Web pages are created with plain ASCII text only, the characters on the source code are limited to the standard keyboard characters. To have special characters such as oe, ß, ñ, or © show up on a web page, designers must utilize special HTML codes.
• Example:
© = © ñ = ñ ß = ß œ = oe
Structure of a URL
• Uniform Resource Locators provide links from a page anywhere on the World Wide Web to any resource on the Internet.
• Starts with the protocol (defines how the info is to be sent and received):
– Web page – ftp:// FTP site – mailto: send a mail message – file:/// File on a local (desktop) machine
The server
• Servers are computers which provide
HTML web pages to a browser using the http protocol.
• Must have direct, permanent connection to the Internet
Domain
• Domain defines the server on the internet where the the resources are located.
Common ones are .com (commercial), .org
(nonprofit organization), .mil (military), and .edu (educational facility)
• Common country codes are: .uk (United Kingdom), .jp (Japan), .au (Australia)
Directory Path
• Directory path consists of zero or more directories separated by forward-slash characters. (/)
• Important distinction between PCs and the internet: directories on PCs are separated by backwards slash. (\)
Links
• <a href="
Mark's resume </a>
• This is an absolute link. It defines completely the domain of the host computer
( as well as the path (/people/markb) and the file (resume.html).
• <a href="resume.html">Mark's resume</a>
• This is a relative link. Note that the protocol, domain, and path are omitted from the URL. The browser will assume the current domain and path are to be used.
By current, we mean the domain and directory of the page that is currently being displayed (ie, relative to the current page, find this page).
Using Graphics on Web Pages
• Graphics on web pages are separate files. Unlike a Word document, where the graphics actually "live" within the document, to get a graphic on a web page, designers point to the graphic file in the HTML source code like this:
imgsrc="URL-of-graphic" alt="description of graphic" />
• Graphics are copyrighted material and should only be used with permission.
Graphics can be described as either relative or fully qualified URLs
html> <head> <title>Bunny Webpage</title> </head>
<body bgcolor="turquoise"> <h2 align="center">BUNNY!</h2> <p align="center">
imgsrc="bunny.gif" /> </p> </body> </html>
Relative reference (relative to the location of the HTML document)
html> <head> <title>Bunny Webpage</title> </head>