Embed Size (px)
Citation preview
HTML
Lecture 2
HTML
• Is a markup language NOT a programming language (set of Web Programming standardized codes)
• Used to create Web pages with Hyperlinks.• Hyperlinks Connect pages together.
What is an HTML document?
• It is a Plain-text files (also known as ASCII) that contains the markup tags.
• An HTML file is created using any text editor (e.g.: TextEdit on Macintosh, Notepad on a Windows machine).
• You do not need an Internet connection to compose and view HTML pages.
• The World Wide Web Consortium (http://w3c.org) sets the standards for HTML and its related languages.
What can we do with HTML Document?
we can,• Publish online documents with headings, text, tables, lists,
photos, etc.• Retrieve online information via hypertext links, at the click of
a button.• Design forms for conducting transactions with remote
services, for use in searching for information, making reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
• All computer platforms can understand it. Web pages created on a PC can be viewed, for example, on a Macintosh or a Unix computer.
Basic HTML Editors
There are many ways to write HTML code.It can be done using an Editor Like:• Notepad in Windows.• TextEdit in MAC.
OR
by using a professional integrated development environment (IDE) like:Adobe Dreamweaver
To start Notepad go to:Start All Programs Accessories Notepad
Create a shortcut on your desktop for a quick access
Notepad
Better Editors
That can give you Syntax Highlighting and Syntax Folding are:
• Notepad++ in Windows.• TextWrangler in MAC
Notepad++
Dreamweaver
Source: www.creativemac.com
To start Dreamweaver go to:Start All Programs Adobe Dreamweaver
Notepad VS. IDE
• notepad++ starts up much faster than an IDE.
• stores your tabs from your last session.
• you get a basic understanding of how the language works
• GUI simplifies things
• Compiles & Debugs
There is no right or wrong. It is what YOU prefer.
https://en.wikipedia.org/wiki/Comparison_of_HTML_editors
Website Files
HTML 5
• Newest draft version of HTML/XHTML• Supported by modern browsers
– Safari, Google Chrome, Firefox, Internet Explorer 9
• Intended to be backwards compatible• Adds new elements• Adds new functionality
– Edit form data– Native video and audio– And more!
Writing HTMLBasic Syntax
Elements are defined by tags (markers).Tags are keywords surrounded by angle brackets.• Tag format: - Opening tag: <name> - Closing tag: </name>• Tags normally come in pairs<b>...</b>• The opening tag and its closing tag together specify
a container for the content they enclose
HTML Syntax• HTML syntax: two-sided tag:
<tag attributes>document content</tag>
Starting tag
Properties of the tag. Optional!
Actual content appears in webpage. It could be empty
Closing tag
Examples: <p> CGS 2100 </p>
Basic Syntax
• Not all tags have content - If a tag has no content, its form is <name />
• The container and its content together are called an element
• If a tag has attributes, they appear between its name and the right bracket of the opening tag
HTML Element
An HTML element is everything from the start tag to the end tag
<head>
Element content
</head>
Element start tag/ opening tag.
Element end tag/ closing tag.
Element
Some HTML elements have empty content which are closed in the start tag.
Basic Syntax
• In XHTML, element and attribute names must be in all lowercase letters
• In HTML, they can be any combination of uppercase and lowercase
Commenting Your Files• You might want to include comments in your HTML files.
Comments in HTML are like comments in a computer program—the text you enter is not used by the browser in any formatting and is not directly viewable by the reader just as computer program comments are not used and are not viewable.
• Comments such as the name of the person creating the file, the software and version used in creating a file, or the date that a minor edit was made are the norm.
• To include a comment, enter:<!-- your comments here -->
You must include the exclamation mark and the hyphens as shown.
HTML Tags
In HTML there are two major types of markup tags:
– Empty tags are used for page formatting. They have no closing tag and so doesn’t enclose any text.
– Container tags are used to manipulate or control the contents placed within them. They have a starting tag and an ending tag (/ slash preceding the tag).
The Minimal HTML Document• Each document consists of head and body text. • The head contains the title, and the body contains the actual text that is
made up of paragraphs, lists, and other elements.<!DOCTYPE html><html> <head> </head>
<body> </body>
</html>
This tells your browser that this is an HTML tag
This identifies the first part of your HTML-coded document that contains the title.
This identifies the body part of your HTML-coded document.
HTML Files Extensions
Filename.htmFilename.html
Meta Tags
• Used by Browsers and search engine and how your site info is displayed in the search results.
• <meta> tags always go inside the <head> element.
• Suggested Meta tags to include: charset, description, keywords, author and refresh.
Useful resource:http://www.youtube.com/watch?v=aTaIMu01_bc
Meta Tags<head><meta charest=“utf-8”>
<meta name=“description” content=“Course Code CT1501”>
<meta name=“keywords” content=“Web development, KSU”>
<meta name=“author” content=“author‘s name”>
<title>web development class web page</title>
</head>
Start with a Title
Every HTML document needs a title.Here is what you need to type in the header part of your HTML document:
<title>My Home Page</title>
A basic HTML5 web page template<! DOCTYPE html>
<html lang=“en”><head><title> </title><meta charest=“utf-8”></head><body>
</body></html>
The DTD (Document type definition). Always first line, identifies the type of the markup
language.
Optional, specifies spoken language of the document
Describes the characteristic of the webpage. Utf-8 is widely supported by the browser
Basic Text Markup• Text is normally placed in paragraph elements
• The <p> tag defines a paragraph.
• The <p> tag breaks the current line and inserts a blank line.
• Browsers automatically add some space (margin) before and after each <p> element.
• The new line gets the beginning of the content of the paragraph
HTML Paragraphs
Source Code
<!DOCTYPE html><html><body>
<p>This is a paragraph.</p><p>This is another paragraph.</p>
</body></html>
Result
Empty Tags
An empty tag means that it has no end tag (No closing tag!)The Line break <br> tag• Inserts a single line break. • Causes the next element or text to display on
a new line.• XHTML syntax: <br />• HTML syntax: <br>
Horizontal Rules <hr>
• The <hr> tag In HTML5, the <hr> tag defines a thematic break.
• A horizontal rule is useful to separate major sections of your document.
XHTML syntax: <hr />HTML syntax: <hr>
You will format this in CSS in later lectures
Empty Tags
ExampleSource Code Result
HTML Headings
• Six sizes, 1 - 6, specified with <h1> to <h6>• 1, 2, and 3 use font sizes that are larger than
the default font size• 4 uses the default size• 5 and 6 use smaller font sizes
<!DOCTYPE html><html><body>
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
</body></html>
Source Code Result
HTML Headings
http://www.w3schools.com
FontFont Styles and Sizes (can be nested)
• Emphasis - <em> (often set in italics)• Strong - <strong> (often set in boldface)• Monospace - <code> (often set in Courier)
Superscripts and subscripts
• Subscripts with <sub>• Superscripts with <sup>
For other styles and fonts use CSS (we’ll get to that later)
<!DOCTYPE html><html><body>
<p><h1> Web development, First lecture </h1></p>
<p><b>This text is bold</b></p><p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p><p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p><p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body></html>
Source Code Result
HTML Formatting
http://www.w3schools.com
HTML Attributes• HTML elements can have attributes• Attributes define an element• Attributes are always specified in the start tag• All attributes are made up of two parts: a name
and a value -The name is the property you want to set - The value is what you want the value of the property to beExample: <p id= “top”>First Paragraph</p>
*Find more attributes
Source Code
Result
King Saud University’s Website
HTML Links
<a href="http://www.ksu.edu.sa">King Saud University’s Website</a>
The HTML <a> tag defines a hyperlink.href (hyperlink reference) is an attribute to specify a URL for the page
indicates the link’s destination
The URL The link’s Text
HTML Links
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
http://www.w3schools.com
HTML LinksPossible values for href:• An absolute URL (remote link)
– link to other websites: <a href="http://yahoo.com">Yahoo</a>
• A relative URL (local link)- link to pages in your own site
<a href="index.html">Home</a>
• An anchor URL - points to an anchor within a page
(used a lot in back to top links) href="#top” (local link)
HTML LinksIf the target is not at the beginning of the document, the target spot must be marked - Target labels can be defined in many different tags with the id attribute, as in
<h1 id = ”top”> This is the top of the Page </h1>
- The link to an id must be preceded by a pound sign (#); If the id is in the same document, this target could be
<a href = ”#top”>Back to top?</a>
HTML Links
If the target is in a different document, the document reference must be included <a href = "myAd.html#baskets”> Baskets </a>If you would like the page to be loaded in a new
Window use target
<a href = Http://Ksu.edu.sa
target="_blank"> KSU </a>
* Find more info on attribute TARGET
HTML Links
Email Hyperlink:• Automatically launch the default mail
program configured for the browser• If no mail default is configured, a
message is displayed
<a href="mailto:[email protected]"> Email me</a>
Images
Images can be included using <img >
• by default, browsers can display GIF and JPEG files, more modern browsers can also typically support PNG files and SVG graphics (of course, use at your own risk)
• other image formats may require plug-in applications for display
Images
• Use the src attribute to indicate the image location.• Include alt attribute that describe the image. Alt is
short for alternative text.• width and/or height - dimensions in pixels (often
only need to specify one of them and the other is automatically scaled to match, where possible pictures should be resized using other programs to save on bandwidth and problems that some (older) browsers might have with resizing images)
Images
Example:<img src = ”Smile.jpg” alt = "Picture of a happy face” >
• Make sure your image is in your web site directory folder
• Image as a Link:<a href="http://www.website.com"><img src=”hyperlinkedImage.jpg" alt=”alternitavetext”> </a>
Lists
HTML supports: • Unordered Lists (or Unnumbered lists)• Ordered Lists (or Numbered lists)• Definition lists (or Description lists)
• You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow.
Unordered Lists
1. Starts with an opening list <ul> (for unordered list) tag.
2. Enter the <li> (list item) tag followed by the individual item
3. End the entire list with a closing list </ul> tag
Example
Source Code
<ul> <li> Sara </li> <li> Nora </li> <li> Hana </li></ul>
Result
• Sara• Nora• Hana
The <li> item can contain multiple paragraphs. Indicate the paragraphs with the <P> paragraph tags. Try it!
Ordered Lists
• A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except is uses <ol> instead of <ul>.
• <li> is used here as well to list the items.
Source Code
<ol> <li> Sara </li> <li> Nora </li> <li> Hana </li></ol>
Result
1. Sara2. Nora3. Hana
Description List (Definition Lists )
• The <dl> tag defines a description list.• It is used in conjunction with <dt> (defines terms)
and <dd> (describes each term)• Web browsers generally format the definition on
a new line and indent it.
Example
Source Code<dl>
<dt>HTTP </dt><dd>Short for Hyper Text Transfer Protocol, the
underlying protocol used by the World Wide Web.. </dd></dl>
Result
Blockquote
Display block quoted text in a special way (intended from both left and right margins)
Example
<h1>About WWF</h1><p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</blockquote>
Special Characters
• Some characters (symbols) are reserved in HTML5. For example, you cannot use the > and < signs or the copyright symbol © within your text because the browser could mistake them for markup. You need to use the special characters sometimes called Entity characters.
Special Characters
Char. Entity Meaning& & Ampersand< < Less than> >Greater than" " Double quote' ' Single quote¼ ¼ One quarter½ ½ One half¾ ¾ Three quarters ° Degree(space) Non-breaking space@ © Copyright€ € Euro
The div tag
The div (division) element is a block-level wrapperwhich has no effect, except that it provides a place toadd style or scripting.For example, a group of paragraphs can be given adifferent background
We will see that there are new HTML5 tags which saywhy you are adding a wrapper, so you will hardly everneed div, but knowing about it helps in understandingtutorial sites.
Inline Tags
An inline element does not start on a new line and only takes up as much width as necessary.Some inline tags are:<em> <strong> <dfn> <code> <kbd> <samp><var> <cite> <q> <sub> <sup>
The span tag
The span element is an inline-level wrapper which hasno effect, except that it provides a place to add style orscriptingIt is the inline version of the div elementFor example, a sentence can be given a differentbackgroundAgain, there are more meaningful new tags in HTML5which reduce the need for span tags
New Tags
In HTML5, there are new (div-like) sectioning tags, e.g.:<header> <footer> <nav> <main><section> <article> <aside> <figure>There are new (span-like) phrasing tags, e.g.:<mark> <time> <command>There are new media tags, e.g.:<video> <audio> <canvas> <svg> <math>See the HTML5 differences from HTML4 document:http://www.w3.org/TR/html5-diff/
