Chapter 1
HTML Introduction
!
CSCI1150-04 KOM 350
Instructor: Xin Yang
2
Web Site Introduction
The basic components of a web site are:
•Content - information displayed
•Static: content that doesn’t change for different user interactions
•Dynamic: content that varies based on the user, user input.
!
•Instructions
•Formatting: how the content is to be displayed
•Navigation: path between web pages
•Other Actions: Pop-up windows …
!
3
Web Browsers
!
• The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.
!
• The browser does not display the HTML tags, but uses them to determine how to display the document
4
Browser and Web Server
5
Browser and Web Server
HTML : instructions embedded in a document(web page) that
informs a browser how to display the documents contents.
!
The instructions are expressed as tags with attributes further
defining the tag’s actions.
6
What is HTML?
HTML is a markup language for describing web documents(web pages)
•HTML stands for Hyper Text Markup Language
!
•A markup language is a set of markup tags
!
•HTML documents are described by HTML tags
!
•Each HTML tag describes different document
7
HTML Page Structure
There are always two parts to an HTML file: the head and the body.
!
The head contains information about your HTML file, like its title. The title is what we see in the browser's title bar or page tab.
!
The body is where you put your content, such as text, images, and links. The content in the body is what will be visible on the actual page.
8
HTML Page Structure
9
What is HTML?
10
What is HTML?
Example Explained
!
• The DOCTYPE declaration defines the document type to be HTML
• The text between <html> and </html> describes an HTML document
• The text between <head> and </head> provides information about the document
• The text between <title> and </title> provides a title for the document
• The text between <body> and </body> describes the visible page content
• The text between <h1> and </h1> describes a heading
• The text between <p> and </p> describes paragraph
11
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
! !
•HTML tags normally come in pairs like <p> and </p>
!
•The first tag in a pair is the start tag, the second tag is the end tag
!
•The end tag is written like the start tag, but with a slash before the tag name
12
Pay attention to…
Always put <!DOCTYPE html> on the first line.
This tells the browser what language it's reading (in this case, HTML).
!
Always put <html> on the next line. This starts the HTML document.
!
Always put </html> on the last line.
This ends the HTML document.
13
HTML Versions
14
Common Declaration
15
HTML Headings
!
• HTML headings are defined with the
<h1> to <h6> tags:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
!
<h1> defines the most important heading.
<h6> defines the least important heading.
16
HTML Paragraphs
!
• HTML paragraphs are defined with the
<p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
17
HTML Paragraphs
• Any number of spaces, and any number of new lines, count as only one space
18
HTML Elements
!
• HTML element is everything from the start tag to the end tag:
19
HTML Attributes
•HTML elements can have attributes.
!
•Attributes provide additional information about an element
!
•Attributes are always specified in the start tag
!
•Attributes come in name/value pairs like : name =
“value”
!
20
Title Attributes
•HTML elements can have attributes.
!
!
<p title="About W3Schools”>
W3Schools is a web developer's site.It provides tutorials and references covering many aspects of web
programming,including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
!
21
HTML Links
!
!
• HTML links are defined with the <a> tag:
!
<a href=“http:// www.google.com">Google</a>
22
HTML Links
• An absolute URL - points to another web site (like href=“http://www.google.com”)
!
• A relative URL - points to a file within a web site (like href=“default.htm")
!
• Link to an element with a specified id
within the page (like href="#top")
23
HTML Images
• HTML images are defined with the <img> tag:
!
• The source file (src), alternative text (alt), and size (width and height) are provided as
attributes:
!
• <img src="w3schools.jpg"alt="W3Schools.com"
width="104px" height=“142px"/>
24
HTML Images
• use an image tag, like so: <img>. This tag is a bit different from the others.
!
• Instead of putting the content between the tags, you tell the tag where to get the picture using
src.
!
• It's also different because there is no ending tag.
It has / in the tag to close it:<img src=“url”/>.
25
HTML Images
• Definition and Usage of alt attribute
!
• The required alt attribute specifies an alternate text for an image, if the image cannot be
displayed.
!
• The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
26
HTML Horizontal Rules
•The <hr> tag creates a horizontal line in an HTML page.The hr element can be
used to separate content:
!
!
!
!
27
HTML Comment Tags
•Comments are not displayed by the browser, but it will help you remember why you did certain
things.
!
•With comments you can place notifications and reminders in your HTML:
!
!
!
28
Indentation is your friend
•Indentation really helps make your code more readable!
!
!
!
!
!
!
29
HTML Tip: Use Lowercase Tags
• HTML tags are not case sensitive: <P>
means the same as <p>.
!
• The HTML5 standard does not require lowercase tags, but recommends
lowercase in HTML4, and demands
lowercase for stricter document types
like XHTML.
30
HTML Tip - How to View HTML Source
!
•Have you ever seen a Web page and wondered "Hey!
How did they do that?”
!
•To find out, right-click in the page and select "View Page Source" (in Chrome) or "View Source" (in IE), or similar in another browser. This will open a window containing the HTML code of the page.
!
!
!
!
31
Process for Developing a Web Site
!
• 1. Planning and design
• 2. Create the web pages using an editor
• 3. Test the web pages
• 4. Publish the web pages by uploading the
pages to the web server
32
HTML Editors
!
• Write HTML Using Notepad or TextEdit
!