Embed Size (px)
Citation preview
1
What is HTML?
HyperText Markup Language (HTML) is the main markup language for creating web
pages and other information that can be displayed in a web browser.
HTML is written in the form of HTML elements consisting of tags enclosed in angle
brackets (like <html>), within the web page content. HTML tags most commonly come in pairs
like <h1> and </h1>, although some tags represent empty elements and so are unpaired, for
example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are
also called opening tags and closing tags). In between these tags web designers can add text,
further tags, comments and other types of text-based content.
The purpose of a web browser is to read HTML documents and compose them into visible or
audible web pages. The browser does not display the HTML tags, but uses the tags to interpret
the content of the page.
HTML elements form the building blocks of all websites. HTML allows images and objectsto be
embedded and can be used to create interactive forms. It provides a means to createstructured
documents by denoting structural semantics for text such as headings, paragraphs, lists, links,
quotes and other items. It can embed scripts written in languages such as JavaScript which affect
the behavior of HTML web pages.
Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and
layout of text and other material.
The World Wide Web Consortium (W3C) is the main international standards organization for
the World Wide Web (abbreviated WWW or W3). The W3C, maintainer of both the HTML and
the CSS standards, encourages the use of CSS over explicit presentational HTML.
2
PRESENTATION SLIDES
3
4
CREATING FIRST WEBPAGE WITH NOTEPAD
Go to Start, then "Programs" and then "Accessories." Click "Notepad." It is a lot easier if
you use Notepad++ (you can download it for free on the internet) - once you choose the HTML
language, everything you write will be automatically connected with different colors - that way it
will be a lot easier to correct possible mistakes.
Tell the browser what language you are using. Type <html>. It is the first tag you write that
tells the computer you're starting a web-page. It will also be closed last, so at the end of the
document, close it off by typing this: </html>. This ends the web page.
5
Add the heading of the page as shown.
Give your page a title. A title is important because it gives your users an idea what the page is
about. Also, when users bookmark your site, that title is all they will see in their bookmark list.
The title for HTML code is <title>. Close it off at the end of your title by writing </title> The
title is going to show on the tab don't expect it to be the title of the actual website.
Work on the body of the page. Type <body> to open the body tag. Then close the body tag by
typing </body>. The bulk of the information for your web-page goes between <body> and
</body>.
6
Add some pictures. If you want to put a picture from the Internet onto your web page, the
HTML code for pictures is <img src="URL">
7
Save your work. Go to "save as", put a filename with an .html extension (such as "testfile.html")
and choose "all files" or "text" under file type. It won't work if both are not done. Go find the
page wherever you saved it, double click it, and your default web browser should open up your
very own web-page.
HTML ELEMENTS
The <html> element
<html> <body> <p>This is my first paragraph.</p> </body> </html>
The <html> element defines the whole HTML document. The element has a start tag <html> and an end tag </html>.
The HTML <head> Element
The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
The HTML <title> Element
The <title> tag defines the title of the document.
8
The <title> element is required in all HTML/XHTML documents.
The <title> element:
defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results
The <body> element:
<body> <p>This is my first paragraph.</p> </body>
The <body> element defines the body of the HTML document. The element has a start tag <body> and an end tag </body>. The element content is another HTML element (a p element).
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<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>
9
The <p> element:
<p>This is my first paragraph.</p>
The <p> element defines a paragraph in the HTML document. The element has a start tag <p> and an end tag </p>. The element content is: This is my first paragraph.
The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
<img src="smiley.gif" alt="Smiley face">
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).
HTML Images - Set Height and Width of an Image
The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<img src="smiley.gif" alt="Smiley face" width="32" height="32">
HTML Image Tags
Tag Description
<img> Defines an image
<map> Defines an image-map
<area> Defines a clickable area inside an image-map
HTML <br> Tag
The <br> tag inserts a single line break.
10
The <br> tag is an empty tag which means that it has no end tag.
Example
A line break is marked up as follows:
This text contains<br>a line break.
HTML <hr> Tag
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is used to separate content (or define a change) in an HTML page.
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
</body>
</html>
11
HTML Formatting Tags
HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags.
HTML: the HTML for the above example:
This is an example of <b>bold</b> text.
<html> <body> <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>
HTML Text Formatting Tags Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
12
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML "Computer Output" Tags
Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<var> Defines a variable
<pre> Defines preformatted text
HTML Citations, Quotations, and Definition Tags
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<q> Defines an inline (short) quotation
<cite> Defines the title of a work
<dfn> Defines a definition term
HTML Hyperlinks (Links)
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.
13
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red
Example
<a href="http://www.Yahoo.com/">Visit Yahoo! Website</a>
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
Example
<a href="http://www.google.com/" target="_blank">Visit W3Schools!</a>
HTML Forms
HTML forms are used to pass data to a server. The <form> tag is used to create an HTML form for user input.
HTML <form> method Attribute
The method attribute specifies how to send form-data (the form-data is sent to the page specified in the action attribute).
The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").
Notes on GET:
Appends form-data into the URL in name/value pairs The length of a URL is limited (about 3000 characters) Never use GET to send sensitive data! (will be visible in the URL) Useful for form submissions where a user want to bookmark the result GET is better for non-secure data, like query strings in Google
14
Notes on POST:
Appends form-data inside the body of the HTTP request (data is not shown is in URL) Has no size limitations Form submissions with POST cannot be bookmarked
Syntax
<form method="get"> Or <form method="post">
An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
HTML Form Tags
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
HTML Forms - The Input Element
The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.
15
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
How the HTML code above looks in a browser:
First name:
Last name:
Password Field
<input type="password"> defines a password field:
<form> Password: <input type="password" name="pwd"> </form>
How the HTML code above looks in a browser:
Password:
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
How the HTML code above looks in a browser:
Male
Female
16
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
How the HTML code above looks in a browser:
I have a bike
I have a car
HTML <textarea> Tag
The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
<textarea rows="4" cols="50"> In this lecture you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea>
HTML <label> Tag
The <label> tag defines a label for an <input> element.
17
The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
HTML <fieldset> & <legend>Tag
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
The <legend> tag defines a caption for the <fieldset> element.
<html> <body> <form> <fieldset> <legend>Personal Info:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> <fieldset> <legend>Educational Background:</legend> University: <input type="text"><br> College: <input type="text"><br> School: <input type="text"> </fieldset> </form> </body> </html>
18
HTML <select> Tag
The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list.
<html> <body> <select> <option value="it">Information Technology</option> <option value="mgt">Management Sciences</option> <option value="math">Mathematics</option> <option value="pharm">Pharmacy</option> <option value="eng">English</option> <option value="eco">Economics</option> </select> </body> </html>
19
HTML <optgroup> Tag
The <optgroup> is used to group related options in a drop-down list.
If you have a long list of options, groups of related options are easier to handle for a user.
<html> <body> <select> <optgroup label="Faculty of Arts"> <option value="eng">English</option> <option value="edu">Education</option> <option value="Ecom">Economics</option> </optgroup> <optgroup label="Faculty of Sciences"> <option value="chem">Chemistry</option> <option value="botany">Botany</option> <option value="gen">Genetics</option> </optgroup> <optgroup label="Faculty of Health Sciences"> <option value="biotech">Biotechnology</option> <option value="biochem">Biochemistry</option> <option value="micro">Microbiology</option> </optgroup> </select> </body> </html>
20
HTML <button> Tag
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
<button type="button">Click Me!</button>
If you want your form to be sent somewhere, a Submit button is needed (though you can write
code for your own submit button). When the Submit button is clicked, the browser will check the
ACTION attribute of the FORM tag to see where you want the data sent. It then checks the
METHOD attribute to see what method you want to use, Post or Get. The browser will then try
to send the form's data for you.
The INPUT element defines an input field. When you specify "submit" (or "reset") for
the type attribute of this element, a submit button (or a reset button) is created.
<input type="submit" value="Submit">
<input type="reset" value="Reset">
HTML Lists
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul> <li>Coffee</li> <li>Milk</li> </ul>
How the HTML code above looks in a browser:
Coffee Milk
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
21
<ol> <li>Coffee</li> <li>Milk</li> </ol>
How the HTML code above looks in a browser:
1. Coffee 2. Milk
HTML Description Lists
A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
How the HTML code above looks in a browser:
Coffee - black hot drink Milk - white cold drink
HTML List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
