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
Notepad To start Notepad go to: Start All Programs Accessories Notepad Create a shortcut on your desktop for a quick access
Better Editors That can give you Syntax Highlighting and Syntax Folding are: Notepad++ in Windows. TextWrangler in MAC
Notepad++
Dreamweaver To start Dreamweaver go to: Start All Programs Adobe Dreamweaver Source: www.creativemac.com
Notepad VS. IDE There is no right or wrong. It is what YOU prefer. 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 HTML Basic 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
Actual content appears in webpage. It could be empty HTML Syntax HTML syntax: two-sided tag: <tag attributes>document content</tag> Closing tag Starting tag Properties of the tag. Optional! Actual content appears in webpage. It could be empty 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 Element end tag/ closing tag. 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.htm Filename.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 The DTD (Document type definition). Always first line, identifies the type of the markup language. <! DOCTYPE html> <html lang=“en”> <head> <title> </title> <meta charest=“utf-8”> </head> <body> </body> </html> 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 Result <!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> Empty Tags 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
Example Source 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
HTML Headings Source Code Result <!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> http://www.w3schools.com
Font Font 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)
HTML Formatting Source Code Result <!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> 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 be Example: <p id= “top”>First Paragraph</p> *Find more attributes
HTML Links Source Code Result King Saud University’s Website The HTML <a> tag defines a hyperlink. href (hyperlink reference) is an attribute to specify a URL for the page Source Code <a href="http://www.ksu.edu.sa">King Saud University’s Website</a> indicates the link’s destination The URL The link’s Text Result King Saud University’s Website
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 Links Possible 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 Links If 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:me@ksu.edu.sa"> 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 Starts with an opening list <ul> (for unordered list) tag. Enter the <li> (list item) tag followed by the individual item End the entire list with a closing list </ul> tag
Example Source Code Result <ul> Sara <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 Sara Nora 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 Result <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 wrapper which has no effect, except that it provides a place to add style or scripting. For example, a group of paragraphs can be given a different background We will see that there are new HTML5 tags which say why you are adding a wrapper, so you will hardly ever need div, but knowing about it helps in understanding tutorial 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 has no effect, except that it provides a place to add style or scripting It is the inline version of the div element For example, a sentence can be given a different background Again, there are more meaningful new tags in HTML5 which 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/