Slide 1

Slide 1 text

html html Mohamed Loey

Slide 2

Slide 2 text

agENDa Part I: Introduction Part II: HTML Tags (Basic) Part III: HTML Tags Part V: HTML Forms

Slide 3

Slide 3 text

agENDa Part I: Introduction  What is HTML?  Client & Server  Client & Server  HTML Versions  HTML Tags  HTML Page Structure  Web Browsers  HTML Editors

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

clIENt & SERVER

Slide 6

Slide 6 text

html VERSIONS Version Year HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2012

Slide 7

Slide 7 text

html tagS • HTML tags are keywords (tag names) surrounded by angle brackets like • The first tag in a pair is the start tag, the second tag is • 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 and

Slide 8

Slide 8 text

html pagE StRUctURE

Slide 9

Slide 9 text

wEB BROwSERS • A browser is a software program which interprets the HTML documents and displays it on the user’s screen. 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.

Slide 10

Slide 10 text

wEB BROwSERS HTML Code Chrome Browser

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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 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.

Slide 13

Slide 13 text

StEp 2: wRItE SOmE html • Write or copy some HTML into Notepad.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

StEp 4: VIEw html pagE IN yOUR BROwSER • Double-click your saved HTML file, and the result will look much like this:

Slide 16

Slide 16 text

pROFESSIONal html EDItORS • HTML can be edited by using a professional HTML editor like: • Adobe Dreamweaver • Adobe Dreamweaver • Netbeans • CoffeeCup HTML Editor • Microsoft Expression Web

Slide 17

Slide 17 text

aDOBE DREamwEaVER

Slide 18

Slide 18 text

agENDa Part II: HTML Tags (Basic)  HTML Head Tag  HTML Body Tag  HTML Body Tag  HTML Basic Tags  HTML Heading Tags  HTML Paragraph Tag  HTML Formatting Tags  HTML Attributes  HTML Styles

Slide 19

Slide 19 text

html hEaD tag • The element is a container for all the head elements. Elements inside can include scripts, instruct the browser where to find style scripts, instruct the browser where to find style sheets, provide meta information, and more. • The following tags can be added to the head section: , <style>, <meta>, <link>, <script>, <noscript>, and <base>. • The <title> tag defines the title of the document.

Slide 20

Slide 20 text

html BODy tag • The tag defines the document's body. • The element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Slide 21

Slide 21 text

html BODy & hEaD tag ExamplE

Slide 22

Slide 22 text

html BODy & hEaD tag • On Chrome Browser

Slide 23

Slide 23 text

html BaSIc tagS Tag Description Defines the document type Defines an HTML document 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

Slide 24

Slide 24 text

html hEaDINg tagS • HTML headings are defined with the

to

tags. • • Example:

Slide 25

Slide 25 text

html hEaDINg tagS • On Chrome Browser

Slide 26

Slide 26 text

html paRagRaph tag • HTML paragraphs are defined with the

tag. • Example:

Slide 27

Slide 27 text

html paRagRaph tag • On Chrome Browser

Slide 28

Slide 28 text

html FORmattINg tagS Tag Description Defines text that should be stylistically different from normal text Defines important text Defines important text Defines bold text Defines a part of text in an alternate voice or mood Defines smaller text Not supported in HTML5. Use CSS instead. Defines big text Not supported in HTML5. Use CSS instead. Defines font, color, and size for text Not supported in HTML5. Use CSS instead. Defines centered text

Slide 29

Slide 29 text

html FORmattINg tagS • HTML uses tags like and for formatting output, like bold or italic text. • • Example:

Slide 30

Slide 30 text

html FORmattINg tagS • On Chrome Browser

Slide 31

Slide 31 text

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"

Slide 32

Slide 32 text

html attRIBUtES • Example:

Slide 33

Slide 33 text

html attRIBUtES • On Chrome Browser

Slide 34

Slide 34 text

html StylES • Example:

Slide 35

Slide 35 text

html StylES • On Chrome Browser

Slide 36

Slide 36 text

agENDa Part III: HTML Tags  HTML Lists Tags  Unordered Lists Tags  Unordered Lists Tags  Ordered Lists Tags  HTML Hyperlink Tag  HTML Image Tag  HTML Table Tags  HTML Layouts

Slide 37

Slide 37 text

html lIStS tagS Tag Description

Defines a list item Not supported in HTML5. Use

Slide 38

Slide 38 text

UNORDERED lIStS tagS • An unordered list starts with the

tag. • • Example:

Slide 39

Slide 39 text

UNORDERED lIStS tagS • On Chrome Browser

Slide 40

Slide 40 text

ORDERED lIStS tagS • An ordered list starts with the

tag. • • Example:

Slide 41

Slide 41 text

ORDERED lIStS tagS • On Chrome Browser

Slide 42

Slide 42 text

html hypERlINK tag • The HTML 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.

Slide 43

Slide 43 text

html hypERlINK tag • Example:

Slide 44

Slide 44 text

html hypERlINK tag • On Chrome Browser

Slide 45

Slide 45 text

html ImagE tag • In HTML, images are defined with the 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.

Slide 46

Slide 46 text

html ImagE tag • Example:

Slide 47

Slide 47 text

html ImagE tag • On Chrome Browser

Slide 48

Slide 48 text

html taBlE tagS Tag Description Defines a table Defines a row in a table Groups the header content in a table Groups the body content in a table Groups the footer content in a table Defines a table caption Defines a table caption Defines a header cell in a table Defines a cell in a table

Slide 49

Slide 49 text

html taBlE tagS • Tables are defined with the tag. • A table is divided into rows with the tag. (tr stands for table row) • A row is divided into data cells with the tag. (td stands for table data)

Slide 50

Slide 50 text

html taBlE tagS • Examlpe:

Slide 51

Slide 51 text

html taBlE tagS • On Chrome Browser

Slide 52

Slide 52 text

html layOUtS • Most websites have put their content in multiple columns (formatted like a magazine or newspaper). • Multiple columns are created by using

or • Multiple columns are created by using

or 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 tag.

Slide 53

Slide 53 text

html layOUtS •

example:

Slide 54

Slide 54 text

html layOUtS • On Chrome Browser

Slide 55

Slide 55 text

html layOUtS • Tag Example

Slide 56

Slide 56 text

html layOUtS • On Chrome Browser

Slide 57

Slide 57 text

agENDa Part V: HTML Forms  HTML Forms and Input Tags  HTML Form Tag  Text Fields  Password Field  Radio Buttons  Checkboxes  Submit Button

Slide 58

Slide 58 text

html FORmS aND INpUt tagS Tag Description Defines an HTML form for user input Defines an input control Defines an input control 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

Slide 59

Slide 59 text

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 fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. • The tag is used to create an HTML form • The most important form element is the element.

Slide 60

Slide 60 text

tExt FIElDS • On Chrome Browser

Slide 61

Slide 61 text

tExt FIElDS • Example:

Slide 62

Slide 62 text

paSSwORD FIElD • On Chrome Browser

Slide 63

Slide 63 text

paSSwORD FIElD • Example:

Slide 64

Slide 64 text

RaDIO BUttONS • On Chrome Browser

Slide 65

Slide 65 text

RaDIO BUttONS • Example:

Slide 66

Slide 66 text

chEcKBOxES • On Chrome Browser

Slide 67

Slide 67 text

chEcKBOxES • Example:

Slide 68

Slide 68 text

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. form's action attribute. • On Chrome Browser