Ali Alshowaish

What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language Created by Tim Berners-Lee in late 1980s from SGML

What is HTML? The markup tags tell the web browser how to display the page For instance put text in a bold font. HTML is not a programming language, it is a markup language HTML Version 4.01 is current.

Why do we need HTML? Simple text files are not enough? Word-processing files are not appropriate: Proprietary. Not Standard. Need to be downloaded first. No hyperlinks. Even word-processing Software use Markup Languages

What is a HTML File? An HTML file is a text file (ASCII) containing small markup tags An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor: Notepad or WordPad (PC) or SimpleText (Mac) WYSIWYG (FrontPage, Dreamweaver, … etc.

HTML Syntax When you learn a language, you need to learn rules, called syntax Elements to define the structure of the document Examples of elements are: head, body, p, ul

HTML Syntax When you insert these elements in your HTML file you surround them with (greater than) symbols. Examples:,, and. These are no longer elements; they are now called tags. Tags are Predefined.

Open Notepad and Type in the following text: Title of page This is my first homepage. This text is bold

Example Explained The first tag in your HTML document is. This tag tells your browser that this is the start of an HTML document. The last tag in your document is. This tag tells your browser that this is the end of the HTML document.

Example Explained The text between the tag and the tag is header information. Header information is not displayed in the browser window. The text between the tags is the title of your document.

Example Explained The title is displayed in your browser's caption. The text between the tags is the text that will be displayed in your browser. The text between the and tags will be displayed in a bold font.

Reviewing the File: Save the file as "mypage.html". Don’t close Notepad. Open the file in your browser (e.g., Internet Explorer).

HTML Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters The surrounding characters are called angle brackets HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag HTML tags must be closed. The text between the start and end tags is the element content HTML tags are not case sensitive, means the same as

This is an HTML element: The HTML element starts with a start tag: The content of the HTML element is: This text is bold. The HTML element ends with an end tag: The purpose of the tag is to define an HTML element that should be displayed as bold. This text is bold

Comments in HTML The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Basic HTML Tags Start TagPurpose Defines the document type Defines an html document Defines the header element Defines the page title Defines the body of the page to Defines header 1 to header 6 Defines a paragraph Inserts a single line break Inserts a horizontal line Defines a comment

Attributes HTML elements contain attributes to define functionality of the tag: Attributes usually come in name/value pairs. Examples:

Adding link: This is a link

Adding images with the IMG element Use the IMG element to add an image to your page simply. The IMG element includes everything you need in the start tag and does not have end tags. src: URL of image Alt: short description Height, width: height and width of image

Character : Start TagPurpose Defines bold text Deprecated Defines italic text to Defines header 1 to header 6 Defines emphasized text Defines big text Defines strong/bold text Defines small text Defines superscripted text Defines subscripted text Deprecated

Lists : Start TagPurpose Defines an unordered list Defines an ordered list Defines a list item Defines a definition list Defines a definition term Defines a definition description

Tables : Start TagPurpose Defines a table Defines a table caption Defines table header Defines a table row Defines a table cell Defines a table header Defines a table body Defines a table footer Defines attributes for table columns Defines groups of table columns

Form : Start TagPurpose Defines a form Defines an input field Defines a large text area Defines a push button Defines a selectable list Defines an option group Defines an item in a list box Defines a label Defines a fieldset Defines a title in a fieldset

DIV and SPAN : Div and Span tags are both used as content wrappers. The difference between the two is DIV is a block element while SPAN is an inline element. What that means is the DIV tag takes up the entire width of the screen whereas SPAN conforms to the width of whatever element it contains.

Any Question? Thank you all