html comprehensive overview
TRANSCRIPT
![Page 1: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/1.jpg)
HTMLMohamed Loey
![Page 2: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/2.jpg)
Agenda
Part I: IntroductionPart II: HTML Tags (Basic)Part III: HTML TagsPart V: HTML Forms
![Page 3: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/3.jpg)
Agenda
Part I: IntroductionWhat is HTML?Client & ServerHTML VersionsHTML TagsHTML Page StructureWeb BrowsersHTML Editors
![Page 4: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/4.jpg)
What is HTML?• HTML stands
for Hyper Text Markup Language• HTML is a markup language• A markup language is a set of markup tags• The tags describe document content• HTML documents contain HTML tags and
plain text• HTML documents are also called web pages
![Page 5: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/5.jpg)
Client & Server
![Page 6: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/6.jpg)
HTML Versions
Version YearHTML 1991HTML+ 1993
HTML 2.0 1995HTML 3.2 1997HTML 4.01 1999XHTML 2000HTML5 2012
![Page 7: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/7.jpg)
HTML Tags• HTML tags are keywords (tag names) surrounded
by angle brackets like <html>• 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, with
a slash before the tag name• Start and end tags are also called opening
tags and closing tags• HTML tags normally come in pairs like <html>
and </html>
![Page 8: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/8.jpg)
HTML Page Structure
![Page 9: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/9.jpg)
Web Browsers• A browser is a software program which
interprets the HTML documents and displays it on the user’s screen.
• The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages.
![Page 10: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/10.jpg)
Web Browsers
HTML Code Chrome Browser
![Page 11: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/11.jpg)
HTML Editors• Write HTML Using Notepad or
TextEdit• We believe using a simple text editor
(Notepad) is a good way to learn HTML.• Follow the 4 steps below to create your
first web page with Notepad.
![Page 12: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/12.jpg)
Step 1: Open Notepad• To open Notepad in Windows 7 or earlier:
• Click Start (bottom left on your screen). • Click All Programs. Click Accessories.• Click Notepad.
• To open Notepad in Windows 8 or later:• Open the Start Screen (the window symbol at
the bottom left on your screen). • Type Notepad.
![Page 13: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/13.jpg)
Step 2: Write Some HTML• Write or copy some HTML into Notepad.
![Page 14: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/14.jpg)
Step 3: Save the HTML Page
• Save the file on your computer.• Select File -> Save as in the Notepad
menu.• When saving an HTML file, use either
the .htm or the .html file extension. There is no difference, it is entirely up to you.
![Page 15: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/15.jpg)
Step 4: View HTML Page in Your Browser
• Double-click your saved HTML file, and the result will look much like this:
![Page 16: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/16.jpg)
Professional HTML Editors• HTML can be edited by using a
professional HTML editor like: • Adobe Dreamweaver• Netbeans• CoffeeCup HTML Editor• Microsoft Expression Web
![Page 17: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/17.jpg)
Adobe Dreamweaver
![Page 18: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/18.jpg)
AgendaPart II: HTML Tags (Basic)
HTML Head Tag HTML Body Tag HTML Basic Tags
HTML Heading Tags HTML Paragraph Tag
HTML Formatting Tags HTML Attributes HTML Styles
![Page 19: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/19.jpg)
HTML Head Tag• 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 <title> tag defines the title of the document.
![Page 20: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/20.jpg)
HTML Body Tag• The <body> tag defines the document's
body.• The <body> element contains all the
contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
![Page 21: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/21.jpg)
HTML Body & Head Tag example
![Page 22: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/22.jpg)
HTML Body & Head Tag• On Chrome Browser
![Page 23: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/23.jpg)
HTML Basic TagsTag Description<!DOCTYPE> Defines the document type<html> Defines an HTML document<title> Defines a title for the document<body> Defines the document's body<h1> to <h6> Defines HTML headings<p> Defines a paragraph<br /> Inserts a single line break<hr /> Defines a thematic change in the
content<!--...--> Defines a comment
![Page 24: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/24.jpg)
HTML Heading Tags• HTML headings are defined with the
<h1> to <h6> tags.• Example:
![Page 25: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/25.jpg)
HTML Heading Tags• On Chrome Browser
![Page 26: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/26.jpg)
HTML Paragraph Tag• HTML paragraphs are defined with the
<p> tag.• Example:
![Page 27: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/27.jpg)
HTML Paragraph Tag• On Chrome Browser
![Page 28: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/28.jpg)
HTML Formatting TagsTag Description<u> Defines text that should be stylistically different from
normal text<strong> Defines important text<b> Defines bold text<i> Defines a part of text in an alternate voice or mood<small> Defines smaller text<big> Not supported in HTML5. Use CSS instead. Defines big
text<font> Not supported in HTML5. Use CSS instead. Defines font,
color, and size for text<center> Not supported in HTML5. Use CSS instead. Defines
centered text
![Page 29: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/29.jpg)
HTML Formatting Tags• HTML uses tags like <b> and <i> for
formatting output, like bold or italic text.
• Example:
![Page 30: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/30.jpg)
HTML Formatting Tags• On Chrome Browser
![Page 31: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/31.jpg)
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"
![Page 32: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/32.jpg)
HTML Attributes• Example:
![Page 33: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/33.jpg)
HTML Attributes• On Chrome Browser
![Page 34: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/34.jpg)
HTML Styles• Example:
![Page 35: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/35.jpg)
HTML Styles• On Chrome Browser
![Page 36: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/36.jpg)
Agenda
Part III: HTML TagsHTML Lists Tags
Unordered Lists Tags Ordered Lists Tags
HTML Hyperlink Tag HTML Image Tag HTML Table Tags HTML Layouts
![Page 37: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/37.jpg)
HTML Lists Tags
Tag Description<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Not supported in HTML5. Use <ul> instead.Defines a directory list
<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
![Page 38: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/38.jpg)
Unordered Lists Tags• An unordered list starts with the <ul>
tag. Each list item starts with the <li> tag.
• Example:
![Page 39: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/39.jpg)
Unordered Lists Tags• On Chrome Browser
![Page 40: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/40.jpg)
Ordered Lists Tags• An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.• Example:
![Page 41: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/41.jpg)
Ordered Lists Tags• On Chrome Browser
![Page 42: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/42.jpg)
HTML Hyperlink Tag• 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.
• When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
![Page 43: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/43.jpg)
HTML Hyperlink Tag• Example:
![Page 44: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/44.jpg)
HTML Hyperlink Tag• On Chrome Browser
![Page 45: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/45.jpg)
HTML Image Tag• In HTML, images are defined with the
<img> 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.
![Page 46: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/46.jpg)
HTML Image Tag• Example:
![Page 47: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/47.jpg)
HTML Image Tag• On Chrome Browser
![Page 48: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/48.jpg)
HTML Table TagsTag Description<table> Defines a table<caption> Defines a table caption<th> Defines a header cell in a table<tr> Defines a row in a table<td> Defines a cell in a table<thead> Groups the header content in a table<tbody> Groups the body content in a table<tfoot> Groups the footer content in a table
![Page 49: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/49.jpg)
HTML Table Tags• Tables are defined with
the <table> tag.• A table is divided into rows with
the <tr> tag. (tr stands for table row)
• A row is divided into data cells with the <td> tag. (td stands for table data)
![Page 50: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/50.jpg)
HTML Table Tags• Examlpe:
![Page 51: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/51.jpg)
HTML Table Tags• On Chrome Browser
![Page 52: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/52.jpg)
HTML Layouts• Most websites have put their content in
multiple columns (formatted like a magazine or newspaper).
• Multiple columns are created by using <div> or <table> elements.
• The div element is a block level element used for grouping HTML elements.
• A simple way of creating layouts is by using the HTML <table> tag.
![Page 53: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/53.jpg)
HTML Layouts• <div> example:
![Page 54: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/54.jpg)
HTML Layouts• On Chrome Browser
![Page 55: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/55.jpg)
HTML Layouts• <Table> Tag Example
![Page 56: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/56.jpg)
HTML Layouts• On Chrome Browser
![Page 57: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/57.jpg)
Agenda
Part V: HTML FormsHTML Forms and Input Tags HTML Form Tag
Text Fields Password Field Radio Buttons Checkboxes Submit Button
![Page 58: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/58.jpg)
HTML Forms and Input Tags
Tag Description<form> Defines an HTML form for user input<input> Defines an input control<textarea> Defines a multiline input control (text area)<button> Defines a clickable button<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<label> Defines a label for an <input> element
![Page 59: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/59.jpg)
HTML Form Tag• HTML forms are used to pass data to a server.• 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.
• The <form> tag is used to create an HTML form• The most important form element is the
<input> element.
![Page 60: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/60.jpg)
Text Fields• On Chrome Browser
![Page 61: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/61.jpg)
Text Fields• Example:
![Page 62: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/62.jpg)
Password Field• On Chrome Browser
![Page 63: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/63.jpg)
Password Field• Example:
![Page 64: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/64.jpg)
Radio Buttons• On Chrome Browser
![Page 65: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/65.jpg)
Radio Buttons• Example:
![Page 66: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/66.jpg)
Checkboxes• On Chrome Browser
![Page 67: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/67.jpg)
Checkboxes• Example:
![Page 68: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/68.jpg)
Submit Button• A submit button is used to send form
data to a server. The data is sent to the page specified in the form's action attribute.
• On Chrome Browser
![Page 69: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/69.jpg)
Submit Button• Example:
![Page 70: HTML Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102612/540cc7747bef0ad7288b6265/html5/thumbnails/70.jpg)
THANK U