HTML 2 - DePaul University
Download
Report
Transcript HTML 2 - DePaul University
HTML Basics
Instructor: A. Burns
1
HTML: The Language of the Web
Web pages are text files, written in a language called Hypertext
Markup Language or HTML.
HTML allows Web authors to create documents that can be displayed
across different operating systems.
HTML code is easy to use, that even nonprogrammers can learn to use
it.
HTML describes the format of Web pages through the use of tags.
Web browser interprets html tags and render the text accordingly
Different Web browsers might display the pages differently!
Instructor: A. Burns
2
Creating Web pages
In order to create your own web page you need:
A text editor. You may not use an HTML editor for this
class. (ex: Notepad is in, FrontPage is out!)
An HTTP browser for testing the pages
(Internet Explorer >= 5.5 will be our standard)
A Web server on which to store your files and make
them available for viewing.
Instructor: A. Burns
3
Extensions
HTML files must be saved with a .html or .htm
extension.
– HTML editors do this automatically.
– You must do it manually when using a text
editor such as Notepad.
Instructor: A. Burns
4
HTML Syntax
Document content is what the users sees on the
page, such as headings and images.
Tags are the HTML codes ‘underneath’ the
document.
Tags control the appearance of the document
content.
tag is the name of the HTML tag
attributes are properties of the tag
<tag attrib=“attribute value”> text </tag>
Tags are not case sensitive.
You can see the HTML of most web pages by
clicking View/Source on the menu bar.
Instructor: A. Burns
5
HTML tag syntax
Generally tags come in two parts
<html>….</html>
Opening tag:<html>
Closing tag:</html>
The two parts mark off a part of the text and specify
its format
Appearance of the web page depends also on the
specific browser settings, and the user’s system and
monitor.
Instructor: A. Burns
6
Basic tag types
Document tags: identify the various parts of the
document (Head, Body)
Text structure tags: determine the layout of the
text (lists, paragraphs)
Style tags: tell the browser how to display the text
Image tags: to incorporate images
Anchor tags: to create hyperlinks
Instructor: A. Burns
7
Document tags
<html> … </html> Mark the beginning and end of the
html file
<head> … </head> Text in this part of the document
is NOT displayed in the browser’s window. It
includes other tags like <title> and <meta>
<title> … </title> Displayed in the browser’s title bar.
It is used as the default bookmark description.
<body> … </body> The contents displayed in the
browser’s window.
Instructor: A. Burns
8
The bare minimum
<html>
<head>
<title>Home Page for Alan Burns
</title>
</head>
<body>Hello world
</body>
</html>
In FrontPage, create a new page and view the HTML by choosing the
Split tab. It will look very similar to the above.
9
HTML Comments
The comment feature provides you with a way to
document your HTML files and make notes to
yourself
Basic form
<!-- + Comments + -->
<!-- This is a comment -->
10
Text structure tags
Headings:
<h1> … </h1>
Boldest and largest
<h2> …. </h2>
<h3> … </h3>
<h4> …. </h4>
<h5> … </h5>
<h6> …. </h6> Lightest and smallest
Paragraph: <p> … </p>
A blank line is inserted before the paragraph.
Line Break: <br>
Ordered lists: <ol> … </ol>
Unordered lists: <ul> … </ul>
11
<HTML>
<HEAD>
<TITLE>DePaul University
</TITLE>
</HEAD>
Begins every HTML document
Begins the head section
<BODY>
This is the first line.<BR>
<P>Start a new paragraph.</P>
<H1>First Heading</H1>
<H2>A second level heading</H2>
Begins the body section
Text followed by line Break
Begins a new paragraph
Level 1 heading (biggest)
Level 2 heading (little smaller)
<HR>
<B>This line is bold.</B><BR>
<I>This line is italicized</I><BR>
<IMG SRC=“\images\banner.gif”>
Inserts a horizontal rule (straight line)
Bold text
Italicized text
Insert an image here
<A HREF=“http://www.cs.depaul.edu”>
DePaul CS Page</A>
Link to another web page
</BODY>
</HTML>
Close the body section
Ends every HTML document
Title that appears on browser title bar
Ends the head section
12
Example
<hmtl>
<head>
<title> HCI 201: Multimedia and the Web
</title>
</head>
<body>
<h1>Important! (This is an H1)</h1>
<p>Notice that we finally have some text in this paragraph.</p>
<h3>Spacing test (this is an H3)</h3>
<p>Here I am
spacing things widely.
It does not make a difference.
I just left two lines blank, but I am still here!
</p>
<br>
<p>Another paragraph!</p>
</body>
</html>
Instructor: A. Burns
13
JavaScript
JavaScript is THE scripting language of the
Web.
JavaScript is used in millions of Web pages to
add functionality, validate forms, detect
browsers, and much more.
JavaScript is easy to learn! You will enjoy it!
http://www.w3schools.com/js/default.asp
14