HTML HYPER TEXT MARKUP LANGUAGE INTRODUCTION Normal text
- Slides: 32
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 <TITLE>My Web Page</TITLE> • Not case sensitive <TITLE> = <title> = <TITLE>
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, Note. Pad.
HOW TO USE EDITOR • Note. Pad is the standard text editor that comes with the microsoft • • • windows operating system. To start Note. Pad 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.
HISTORY OF 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) • • Allows hyperlinks HTML vs. SGML HTML versions include: • • • Though based on SGML, invented by Tim Berners-Lee 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 • • • HTML 5 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: <b> Welcome </b> Empty:
FIRST PAGE • <!DOCTYPE html> <head> My First Page <title>welcome</title> </head> <body> </html>
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 • <h 1>My First Heading</h 1> <p>My first paragraph. </p>
HEADING • <h 1>This is a heading</h 1> <h 2>This is a heading</h 2> <h 3>This is a heading</h 3>
PARAGRAPH • <p>This is a paragraph</p> <p>This is another paragraph</p>
STYLE • <body style="background-color: lightgrey">
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. . • <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> • <h 2>HTML <small>Small</small> Formatting</h 2 • <h 2>HTML <mark>Marked</mark> Formatting</h 2> • <p>My favorite color is <del>blue</del> red. </p>
CONT. . • <p>My favorite <ins>color</ins> is red. </p>(my favorite color is red ) • <p>This is <sub>subscripted</sub> text. </p>(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. • <CENTER></CENTER> Will center elements. • <DIV ALIGN=“value”></DIV> Represents a division in the document and can contain most other element type. The alignment attribute of the DIV element is well supported. • <TABLE></TABLE> Inside a TABLE, alignment can be set for each individual cell.
COMMENTS • <!-- Write your comments here -->
LINK • <a href="url">link text</a> • <a href="http: //www. w 3 schools. com/html/">Visit our HTML tutorial</a>
IMAGE • <img src="wrongname. gif" alt="HTML 5 Icon" style="width: 128 px; height: 128 px; ">
IMAGE SIZE • <img src="html 5. gif" alt="HTML 5 Icon" style="width: 128 px; height: 128 px; "> • <img src="html 5. gif" alt="HTML 5 Icon" width="128" height="128">
TABLE • <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
LIST • Un ordered • <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
ORDRED • <ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
FRAMES • <iframe src="URL"></iframe> • <iframe src="demo_iframe. htm" width="200" height="200"></iframe>
FORM • <form> First name: <input type="text" name="firstname"> Last name: <input type="text" name="lastname"> </form>
FORM • <form> <input type="radio" name="sex" value="male" checked>Male <input type="radio" name="sex" value="female">Female </form>
ASSIGNMENT Develop your CV Webpage with HTML Tags
Markup tag tells the web browser
What is hyper in html
Extra markup html
Structural markup html
Html stands
Semantic html5 elements
What is the transport system of the body
Library.med.utah.edu/kw/pharm/hyper heart.html
N.html
Html hyper
Html hyper
Markup language examples
Security assertion markup language definition
Wml format
Markup language examples
History of markup language
Json xml alternatives
Lightweight markup
Metalenguaje xml
Gml geography markup language
City geography markup language
Qtextarea
Darpa agent markup language
Xml dokument
Darpa agent markup language
Language
Xtensible markup language
Markup language
Graph markup language
Language
Language
Pairedstart
Bigdomaindata
