HTML HYPER TEXT MARKUP LANGUAGE

INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm” or “.html” HTML Editor – A word processor that has been specialized to make the writing of HTML documents more effortless.

TAGS Codes enclosed in brackets Usually paired My Web Page Not case sensitive = =

EDITOR HTML Editors enable users to create documents quickly and easily by pushing a few buttons. Instead of entering all of the HTML codes by hand. Like Dreamwever These programs will generate the HTML Source Code for you. HTML Editors are excellent tools for experienced web developers; however; it is important that you learn and understand the HTML language so that you can edit code and fix “bugs” in your pages. For this Course, we will focus on using the standard Microsoft Windows text editors, NotePad.

HOW TO USE EDITOR NotePad is the standard text editor that comes with the microsoft windows operating system. To start NotePad in windows 7,8,8.1,10 follow the steps bellow: Click on the “Start” button located on your Windows task bar. Click on “Programs” and then click on the directory menu labeled “Accessories”. Locate the shortcut “Notepad ” and click the shortcut once.

HISTORYOF HTML Standard Generalized Markup Language (SGML) Originally created by IBM in 1986 A meta language, meaning it is used to create other languages The basis for HTML, XHTML and XML You create your own document rules using a Document Type Definition (DTD

CONT.. Hypertext Markup Language (HTML) Though based on SGML, invented by Tim Berners-Lee Allows hyperlinks HTML vs. SGML HTML versions include: HTML 3.2 HTML 4.01 (the most popular version of HTML) HTML 4.0 flavors include: 4.01 Transitional -- allows deprecated tags, not as strict 4.01 Strict -- requires all container tags and no allows deprecated tags 4.01 Frameset -- for use with frames

XHTML It is a stricter version of HTML and is designed to confront some of the problems associated with the different and competing versions of HTML

HTML 5.0 HTML5 is an advanced version of HTML (with more incredible features to enhance website performance) It is not heavily used yet There are new tags that make it much easier to embed applications and handle interactive elements. Offline data storage. Ability for visitors to edit sections of web pages. New HTML elements that better describe content. Improved web form handling and validation.

HTML FACTS Do not put a spaces in file names. HTML file names are case sensitive when they are uploaded to the server. However, while working on your PC or Mac, it doesn’t matter. Hard returns, extra spaces, and tabs are ignored by browsers. Tags can be classified as either container tags or empty tags: Container: Welcome Empty:

FIRST PAGE My First Page welcome

FIRST PAGE DESCRIPTION The HEAD of your document point to above window part. The TITLE of your document appears in the very top line of the user’s browser. If the user chooses to “Bookmark” your page or save as a “Favorite”; it is the TITLE that is added to the list. The text in your TITLE should be as descriptive as possible because this is what many search engines, on the internet, use for indexing your site.

ELEMENTS My First Heading My first paragraph.

HEADING This is a heading This is a heading This is a heading

PARAGRAPH This is a paragraph This is another paragraph

STYLE

FORMATING Formatting elements were designed to display special types of text: Bold text Important text Italic text Emphasized text Marked text Small text Deleted text Inserted text Subscripts Superscripts

CONT.. This text is bold. This text is strong. This text is italic. This text is emphasized. HTML Small Formatting</h2 HTML Marked Formatting My favorite color is blue red.

CONT.. My favorite color is red. (my favorite color is red ) This is subscripted text. (This is subscripted text)

ALIGNMENT Some elements have attributes for alignment (ALIGN) e.g. Headings, Paragraphs and Horizontal Rules. The Three alignment values are : LEFT, RIGHT, CENTER. Will center elements. Represents a division in the document and can contain most other element type. The alignment attribute of the DIV element is well supported. Inside a TABLE, alignment can be set for each individual cell.

COMMENTS

LINK link text Visit our HTML tutorial

IMAGE

IMAGE SIZE

TABLE Firstname Lastname Points Eve Jackson 94

LIST Un ordered Coffee Tea Milk

ORDRED Coffee Tea Milk

FRAMES

FORM First name: Last name:

FORM Male Female

?

ASSIGNMENT Develop your CV Webpage with HTML Tags