8257 interfacing 2 in microprocessor for btech students
Â
Session ii(html)
1.
2. ďŽ What is the Internet?
ďł a network of networks â an inter-network, or Internet
ďŽ What are Internet protocols?
ďł the rules for transferring information between programs
ďł HTTP - hypertext transfer protocol
ďł FTP - file transfer protocol
ďł SMTP â simple mail transfer protocol
ďŽ What is the World Wide Web?
ďł a set of HTML pages accessible using the HTTP protocol
2
3. ď How does a Web Browser (Firefox) fit in this picture?
ď - your browser connects, using the HTTP protocol, to a web server
- the web server fetches an HTML web page and sends the HTML to your browser
- your browser turns the HTML page into a nice-looking page on your screen
3
Your computer,
Your web browser
e.g. Firefox
Internet
connection
Internet
Routers
Text file containing
an HTML web page
Their computer,
Their web server
(an HTTP server)
e.g. Apache
/mypage.html
4. ď Hyper Text Markup Language (HTML) Basics
ďł HTML is a âmark-up languageâ
ďŹ You add the mark-up tags to your text document
ďł Now follows a published standard via http://w3c.org/
ďł HTML is a language of mark-up âtagsâ in angle brackets: <>
ďŹ each tag has a name and may have one or more quoted
attributes
ďŹ eg. <p class=âthesisâ style=âcolor: redâ>
ďł Tags usually come in pairs (with some exceptions)
ďŹ <html>...</html>, <body>...</body>, <p>...</p>, <hr>, <br>
ďł Web pages are free-form input; line breaks can be used most
anywhere and don't affect the appearance of the document
ďŹ Yes, your entire page could be a single line of text!
4
5. ďŽ <html> ⌠</html> (Required!)
ďł Basic tag to identify portion of file that contains HTML
ďł <html> is an opening tag
ďł </html> is a closing tag (note the direction of the slash!)
ďł text between the opening and closing tag is called the âelementâ
ďŽ <head> ⌠</head> (Required!)
ďł placed at the top of document immediately after the <html> tag
ďł tags information about the document, e.g. author, style, etc.
ďł contains the required document <title>...</title> tag
5
6. ďŽ <title> ⌠</title> (Required!)
ďł included as an element inside the <head>âŚ</head> section
ďł element of this tag is the title displayed in title bar of the
browser
ďł may also be used as title of page when page is bookmarked
ďł should be meaningful and uniquely identify the page
ďŽ <body> ⌠</body> (Required!)
ďł included as the second element inside the <html>âŚ</html> tags.
ďł follows the <head>âŚ</head> portion of the document
ďł contains the information to be displayed in the browser window
ďł any attributes set on this tag will apply to the entire page
6
7. ďŽ <p> ⌠</p> (Required!)
ďł included as an element inside the <body>âŚ</body> section
ďł Surrounds a paragraph of text
ďŽ DOCTYPE (Required!)
ďł Must be the very first line of your file, before <html>
ďł NOT an HTML tag; it is an instruction to your web browser
ďł Tells the browser what version of HTML to expect
ďł In this course we use only the âstrictâ HTML version 4.01 type:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
7
8. 8
HTML â Required Tags
ďŽ That's all you need for a basic web page!
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Title</title>
</head>
<body>
<p>This is my first web page.</p>
</body>
</html>
9. ď More useful basic tags:
ďŽ <br> (no closing tag needed)
ďł put a line break in the text (starts a new line)
ďŽ <h1> ⌠</h1> through <h6> ... </h6>
ďł used to identify text as a Level 1 (major) to Level 6 (minor) heading
Comment Tag
ďŽ <!-- comments here -->
ďł notice that the comment is typed as an attribute inside the tag
ďł comments may be one or multiple lines long (HTML is free-form)
ďł text within this tag will not be displayed or processed by your browser
ďł comments do not nest! No comments inside comments!
ďł The comment may not contain two (or more) adjacent dashes, e.g. --
9
10. ď The Anchor Tag â Hyper Linking - making the web a
web
ďŽ <a> ⌠</a>
ďł one major attribute â the location of the hyperlink:
ďŹ href=âstringâ
ďł element is clickable/selectable as a document hyperlink
ďł browser attempts to load the page specified by the href=
attribute
ďł the href= string can be a relative URL on the same server:
ďŹ without the leading http://host/ it is in the same directory
structure:
ďŹ e.g. <a href=âpage2.htmlâ>Click here to continue</a>
ďŹ e.g. <a href=âimages/box.jpgâ>See the box here.</a>
ďŹ e.g. <a href=â../another_dir/page3.htmlâ>Click here</a>
10
11. ďŽ <a>âŚ</a> anchor tag continued
ďł The href= string can be an absolute URL on any server:
ďŹ string can be any HTTP URL (web address) you like:
ďŹ e.g. <a href=âhttp://www.gnu.org/philosophy/â>Free
Software</a>
ďł The href= string can be an email address:
ďŹ string can be an email address preceded by âmailto:â
ďŹ e.g. <a href=âmailto:idallen@idallen.ca>Ian! D. Allen
email</a>
ďŹ Attempts to open an email client (specified in the web
browser's options) and places the specified email address in
the To: field of a new email message.
11
12. ďŽ <img> (no closing tag needed)
ďł used to display graphics (.jpeg, .png, .gif) in your web pages
ďł you must specify the URL for the image source, and an alt= text
ďł the basic attributes of <img> are:
ďŹ src=âstringâ - the absolute or relative location of the image file
ďŹ alt=âstringâ - Alternate Text for people who don't see images
ďŹ height=âstringâ - image height, percent or absolute pixels
(optional)
ďŹ width=âstringâ - image width, percent or absolute pixels
(optional)
ďŹ title=âstringâ - mouse-over title of the image (optional)
ďŹ EtcâŚ.
ďł specifying height= and width= lets your browser reserve space in the
document to load the image in the background and avoid redrawing
the page after the image is fully loaded
12
13. ⢠<hr> (no closing tag needed)
â Hard/Horizontal Rule â draw a horizontal line
â rule appearance can be changed with styles
⢠<blockquote> ⌠</blockquote>
â block quotation, indented
⢠<q> ⌠</q>
â a short, in-line âquotation as part of running textâ
⢠<pre> ⌠</pre>
â preformatted text (e.g. computer code or output)
â fixed-width font (e.g. Courier fixed width)
â preserves spaces and line breaks
13
14. ⢠Font-style tags â for more control, use CSS instead
⢠<b> ⌠</b> and <i> ⌠</i>
â bold and italic text (in-line)
⢠<tt> ⌠</tt>
â Teletype Text: fixed-width font (e.g. Courier)
⢠<big> ⌠</big> and <small> ⌠</small>
â bigger and smaller text (in-line)
14
HTML - Basic TagsHTML - Basic TagsHTML - Basic Tags
15. ď Phrase tags â often better done using CSS
⢠<em> ⌠</em> and <strong> ... </strong>
â text to be emphasized and strongly emphasized
â browser decides how: usually italicized, made bold
Less often used:
⢠<code>...</code>, <samp>...</samp>,
<kbd>...</kbd>
â computer code, sample code, keyboard text
â usually rendered in Courier fixed-width font
15
16. ď The <style> element and the style= attribute
⢠The style= attribute can be used on most tags
â defines features for a single HTML element, e.g.
<p style=âtext-align: centerâ>Center me.</p>
⢠The <style> element: <style type=âtext/cssâ> ...
</style>
â <style> tag always goes in the <head> section
â defines style information for the whole HTML page
â requires the type=âtext/cssâ attribute
â more details to come in the description of CSS
â to link to a separate CSS style sheet, use instead:
<link rel=âstylesheetâ type=âtext/cssâ href=âstringâ>
16
HTML â Style Element/Attribute
18. ⢠<li>âŚ</li>
â List Item: surrounds each list item inside a list
â used inside both <ul> and <ol> list types
⢠<ul>âŚ</ul>
â surrounds an unordered list â no numbering
â <li>...</li> items each indented and bulleted
â use styles (style= attribute) to change type of bullet:
â CSS style: list-style-type: string
⢠string can be: circle, disc, square
⢠e.g. <ul style=âlist-style-type: squareâ> ... </ul>
18
HTML â Unordered Lists
19. ⢠<ol> ⌠</ol>
â surrounds an ordered list
â items are indented and numbered (or alphabetized)
â use styles (style=) to change type of numbering:
â CSS style: list-style-type: string
⢠examples of string: decimal, lower-alpha, upper-
roman
⢠e.g. <ol style=âlist-style-type: upper-latinâ> ... </ul>
â the start= attribute determines first item's value
⢠e.g. <ol start=â3â> - begin numbering at 3 (or c, or iii)
⢠but this is deprecated, with no CSS replacement!
⢠http://www.w3schools.com/tags/att_ol_start.asp
19
20. ⢠<dl>âŚ</dl>
â definition list containing <dt> and <dd> items
â <dt>...</dt> definition title
â <dd>...</dd> definition description
⢠Example definition list containing two definitions:
<dl>
<dt>Hacker</dt>
<dd>An expert or enthusiast of any kind.</dd>
<dt>Cracker</dt>
<dd>An intruder into computer systems.</dd>
</dl>
20
21. 21
HTML - <meta> - Page Attributes
⢠<meta> (no closing tag needed)
â used only inside <head> section of page
â gives details about page, e.g. author, keywords
â search engines may ignore keywords, since many
pages use fake keywords to boost search results
<head>
<title>CST8281 Course Homepage</title>
<meta name="Keywords" content=âFundamentals, HTML, CSSâ>
<meta name="Description" content=âAn introductory course
dealing with computer and Internet fundamentals.">
<meta name="GENERATOR" content="Arachnophilia 5.4">
</head>
22. 22
HTML - <meta> - continued
⢠elements of <meta> include:
â name=string identifies what type of meta content will follow
â content=string details relating to the name
⢠<meta> can also be used to have your page automatically
load another web page after a short delay:
<meta http-equiv="refresh" content="10; url=index.html">
â note the attribute name: http-equiv=ârefreshâ
â the content= string begins with number of seconds
before next page is loaded, followed by a
semicolon, then url= giving the URL of the next
page to be loaded
23. ⢠Use <meta> to set the character set for the HTML page
â needed to pass W3C validation without warnings
<meta http-equiv=âContent-Typeâ
content=âtext/html; charset=UTF-8â>
⢠also frequently used: charset=iso-8859-1
â iso-8859-1 is âLatin-1â and includes French
â Latin-1 common in North America, Western Europe
â but UTF-8 includes all languages (preferred)
23
HTML â <meta> - charset â Character Set
24. ď Identifying and Grouping elements (e.g. for CSS)
⢠<div>...</div>
â division or section
â groups and identifies one or more block-elements
â usually causes a line break before and after
⢠<span>...</span>
â groups and identifies in-line elements (e.g. words)
â no visual change by itself (no line break)
â used to apply styles to parts of a text line, e.g.
This <span style=âcolor: redâ>red</span> apple.
24
HTML â Identify/Group Tags
25. ď HTML Entities â for special characters, accents, foreign
â starts with ampersand and ends with semicolon
ď non-breaking-space â acts like a letter
â words connected with will not separate
across a line break; they stay together as one word
â e.g. Mr. Ian! D. Allen
ď < (less than) = < > (greater than) = >
ď " (double quote) = " ' (apostrophe) = '
ď & (ampersand) = &
â many, many others!
25
HTML â Entities (Special Characters)