11 introduction to html. 2 objectives you will be able to create a simple web page in html using a...
Post on 17-Jan-2018
216 Views
Preview:
DESCRIPTION
TRANSCRIPT
11
Introduction to HTML
2
Objectives
You will be able to Create a simple web page in HTML using a plain
text editor. Publish your page on the web so that it can be
seen anywhere in the world. Use character entities to include special
characters in your page.
2
33
The Web’s Rulebooks
The web was created to permit users to view documents.
HTTP -- Hypertext Transport Protocol Defines rules for communication between a
browser and a web server. Web applications must live within these
rules.
HTML – Hypertext Markup Language Defines rules for formatting a document that
a browser will display. Web applications produce their output in this
form.
4
HTTP HTTP is a client-server protocol
Browser is the client. Web server is the server.
Server constantly listens for request messages.
The client originates the message exchange.
Client sends Request. Server sends Response.
5
HTML HTML defines the content of a web
page. Originally included “mark up” for page
layout and appearance. Better handled by CSS today.
Cascading Style Sheets
HTML defines page structure. The Document Object Model Permits programmatic modification
The HTML document itself is plain ASCII text.
66
Cascading Style Sheets CSS conveys the author’s intentions
about how the content of a web page should be displayed.
Instructions analogous to a (human) editor’s instructions to a typesetter.
Center this text. Use a large sans serif font here. Make this bold. etc.
Can be included within an HTML document or can be a separate file.
ASCII text
77
Standards
HTML standards are developed by the World Wide Web Consortium, W3C. http://www.w3.org/
The original HTML standard was very permissive. Lots of room for interpretation. Tolerant of errors and omissions.
88
HTML Versions HTML Version 4.01 is current. XHMTL is a version of HTML that
follows the stricter rules of XML. Can be validated. Better cross browser compatibility.
Version 1.1 is mainstream. Version 2 is under development.
Abandoned by W3C in 2009. Draconian error handling and the WHATWG. http://www.w3.org/html/wg/wiki/DraconianErrorHandli
ng https://en.wikipedia.org/wiki/WHATWG https://whatwg.org/
9
HTML Versions
HTML 5 is the successor to 4.01 http://en.wikipedia.org/wiki/HTML5
Standards work is ongoing. Considered a living document. Now referred to as simply HTML.
Supported to various degrees by all widely used browsers.
9
10
HTML5
Built-in support for Video Audio Drawing Local Storage
Improved separation of presentation from content CSS3 for presentation
Layout, colors, fonts, ...
1111
How to Produce a Web Page
You can use any text editor to produce your HTML file.
The initial examples in this presentation were done with NotePad.
There are many fancy WYSIWYG editors for HTML.
Avoid these while learning HTML. Use a plain text editor and work directly with the HTML.
Visual Studio also has an option to edit HTML files. Works either way: text (language aware) or
WYSIWYG.
1212
How the Page Layout is Determined
Browsers interpret the markup as they see fit.
Author has influence over the resulting layout, but not absolute control
The user also influences the layout. Resize window. Set display resolution. Set font size.
Different browsers may render a given page in different ways.
1313
HTML Tags HTML defines a number of tags which
authors can use to mark up a document. HTML tags are enclosed in angle brackets. Most appear in begin-end pairs Examples:
<title>This appears at the top of the page </title>
<body>All visible content of the page</body> <div> A block of text </div> <p> Beginning of a new paragraph. ... </p>
Multiple tags can apply to the same text, but they should be properly nested.
1414
HTML Tags Some tags alter the appearance of text
Examples: <i> Some text in italics </i> <b> This text will be in bold </b>
Appearance tags are now obsolete but are still supported by browsers and are still widely used.
1515
Cascading Style Sheets
Style sheets are a better way to specify appearance.
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
1616
Some Individual Tags
Some tags stand alone. <br /> Break (Force new line.)
New lines, and other white space, in the HTML document are normally not significant. The browser will wrap the text according to the size of the window.
<hr /> Horizontal Rule (Line across page.)
The / takes the place of the end tag. Can generally be used when there is no text
between the start tag and the end tag. Not necessary in old HTML, but required for valid
XHMTL. Optional in HTML5.
17
Case Sensitivity
Tags are not case sensitive. But upper case is considered invalid in XHTML.
Recommendation: Use lower case. The Visual Studio HTML editor will help.
1818
A Very Simple Web Page
<html><head> <title> A very simple web page</title></head><body><p><b>This is a very simple HTML page!</b></p>
<p>I can write in <i>Italic</i> or <b>Bold</b></p>
<hr />
<p><b><i>Or I can write in both</i></b></p>
<hr />
</body></html>
Note nesting
1919
How to View Your Web Page
While developing a web page, you need to view it frequently with a browser.
You can simply point your browser to a local file by typing the pathname in the URL window. Or double click on the file name or
icon.
Click the Reload button to get the latest version. Beware of cached copies of your page
during development!
2020
Simple Example in Internet Explorer
Title
Page was displayed from a local file.
2121
Headings
<h1>A Really Big Heading</h1><h2>Next level down</h2>...<h6>A Very Small Heading</h6>
2222
Headings
<html><title> A Page with Headings </title>
<h1>A Really Big Heading</h1>Some text to appear below a really big heading.
<h2>Next level down</h2>Some text to appear below a smaller heading.
<h6>A Very Small Heading</h6>Some text to appear below a very small heading.
</html>
2323
Page in Chrome
2424
Miscellaneous Tips What if I want to put some space into my text? Ordinarily white space in an HTML document is
ignored except for producing a single space. To force the browser to leave a space use
(nonbreaking space) & is a form of escape character in HTML. Everything from the & to the ; is interpreted as a
character entity rather than as text to be displayed.
There are many such character entities. Refer to a book or web tutorial on HTML to get the full list. Examples:
http://www.w3schools.com/html/html_entities.asp http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_refe
rences
2525
Miscellaneous Tips
But what if I want an & to appear on my page? Write & (The character entity for
&)
26
<html><head><title>A page with nonbreaking spaces </title ></head><body><h3>A Discourse on Nonbreaking Spaces</h3><p> This paragraph is indented five spaces usingthe &nbsp; entity. The lines will wrapwherever the browser chooses, depending primarilyon the current window size. </p><p> If the user resizes the window, the text will belaid out again using the new window size, andthe line breaks will ofen be different. Noticethat this paragraph had five ASCII spaces at thestart, but they did not cause the paragraph tobe indented.</p></body></html> 26
Example of Nonbreaking Spaces
2727
Page in Firefox
Nonbreaking spaces Ampersand
within textNo indentation for space characters
2828
Structure of a Web Page So far we have been cheating
Leaving out some of the standard parts of a web page as specified by the HTML standard.
Web browsers typically do the best they can with whatever they are given. To improve the odds of your page
looking as you intend on various browsers, you should strictly adhere to the standard.
The Visual Studio HTML editor makes this easier.
2929
Using Visual Studio for HTML From the File menu, select New File.
Then in the dialog box that pops up Select Web. Select HTML Page. Click Open.
30
Using Visual Studio for HTML
Click here
3131
The HTML TemplateInitial lines identify the standard which this page will adhere to.
3232
Structure of the Page
3333
hello.html
34
Save As hello.html
35
Save As hello.html
3636
hello.html in Chrome
Double click on the file icon to open the page in your default browser.
Or right click and select a browser from the “Open With” menu.
End of Section
top related