1 / 43

HTML

What is HTML?. HTML stands for Hyper Text Markup LanguageHTML is not a programming language, it is a markup languageA markup language is a set of markup tagsHTML uses markup tags to describe web pages . ??????? ?????? ???? ??. HTML - Getting Started. Editing HTMLHTML can be written and edited u

winona
Télécharger la présentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

    1. 1 HTML ???? ????? ??? ahmadinia@gmail.com

    2. What is HTML? HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages ??????? ?????? ???? ??

    3. HTML - Getting Started Editing HTML HTML can be written and edited using many different editors like Dreamweaver and Notepad. .HTM or .HTML File Extension First.html ??????? ?????? ???? ??

    4. HTML Tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags HTML Comments <!-- This is a comment --> ??????? ?????? ???? ??

    5. HTML Elements An HTML element is everything from the start tag to the end tag: <p> sample text </p> Nested HTML Elements Most HTML elements can be nested (can contain other HTML elements). <p> <i>sample text </i></p> ??????? ?????? ???? ??

    6. The <html> element The <html> element defines the whole HTML document. The element has a start tag <html> and an end tag </html>. ??????? ?????? ???? ??

    7. The <head> element The < head > element defines the head of the HTML document. The element has a start tag < head > and an end tag </ head >. <head> tag will contain the <title> tag plus any scripts you may have. ??????? ?????? ???? ??

    8. The <body> element The <body> element defines the body of the HTML document. The element has a start tag <body> and an end tag </body>. The contents of web page placed in this tag ??????? ?????? ???? ??

    9. Basic HTML tags <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

    10. 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" <font size="12" color="red" >sample text</ font > ??????? ?????? ???? ??

    11. <TITLE> tag <HEAD> <TITLE>Barbaros Ozdogan Internet Business Systems </TITLE> </HEAD> It is as simple as it sounds-The title element names your document, like title of a book. Every HTML document you create should include a title-and only one title-within the HEAD element.

    12. 12 Background color Attribute added to the <BODY> tag There are 16 color names you can add (red, blue, yellow, etc.) or you have to know the hexadecimal code Examples <BODY BGCOLOR=“red”> <BODY BGCOLOR=“#00FFFF”>

    13. HTML Colors There are 16 color names you can add (blue, yellow, etc.) or you have to know the hexadecimal code Colors are displayed combining RED, GREEN, and BLUE light(RGB) HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign #FF1A00 ??????? ?????? ???? ??

    14. HTML Colors ??????? ?????? ???? ??

    15. 15 Changing the text color Same codes as for background color Attribute of the body tag, too Example would lead to a light blue page with dark purple text <BODY BGCOLOR=“#00FFFF” TEXT=“#800000”>

    16. Text formatting tags ??????? ?????? ???? ??

    17. HTML Headings Headings are defined with the <h1> to <h6> tags. Use HTML headings for headings only. ??????? ?????? ???? ??

    18. HTML Headings ??????? ?????? ???? ??

    19. HTML Paragraphs HTML documents are divided into paragraphs. Paragraphs are defined with the <p> tag. <p>This is a paragraph</p> <p>This is another paragraph</p> ??????? ?????? ???? ??

    20. HTML Text Formatting ??????? ?????? ???? ??

    21. HTML Text Formatting ??????? ?????? ???? ??

    22. HTML Fonts The HTML <font> Tag Should NOT be Used deprecated in HTML 4, and removed from HTML5 Determine font, size and color of text <font size="3" face="verdana" color="blue"> sample font text </font> ??????? ?????? ???? ??

    23. HTML Line Breaks Use the <br /> tag if you want a line break (a new line) without starting a new paragraph <p>This is<br />a para<br />graph with line breaks</p> ??????? ?????? ???? ??

    24. HTML Lines The <hr /> tag creates a horizontal line in an HTML page. <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> ??????? ?????? ???? ??

    25. HTML Links Links allow users to click their way from page to page Links are specified in HTML using the <a> tag. The <a> tag can be used in two ways: To create a link to another document, by using the href attribute To create a bookmark inside a document, by using the name attribute ??????? ?????? ???? ??

    26. HTML Link Syntax <a href="url" target="location " >link lable</a> href : destination web page of link target : The target attribute specifies where to open the linked document.(_self, _blank,…) link lable : text or image <a href="second.html" >link to second</a> <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> ??????? ?????? ???? ??

    27. HTML Links - The name Attribute A named anchor inside an HTML document: <a name="tips">Useful Tips Section</a> Create a link to the "Useful Tips Section" inside the same document: <a href="#tips">Visit the Useful Tips Section</a> Or, create a link to the "Useful Tips Section" from another page: <a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section</a> ??????? ?????? ???? ??

    28. HTML Images images are defined with the <img> tag <img> tag is empty <img src=“source" alt="some_text" width=" width " height=" height " /> src: the URL of the image alt: an alternate text, if the image cannot be displayed width: specify the width of an image height: specify the height of an image <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" /> ??????? ?????? ???? ??

    29. HTML Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag) and each row is divided into data cells (with the <td> tag) A <td> tag can contain text, links, images, lists, forms, other tables, etc. ??????? ?????? ???? ??

    30. HTML Tables <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> ??????? ?????? ???? ??

    31. Table Attribute ??????? ?????? ???? ??

    32. HTML Lists The most common HTML lists are ordered and unordered lists: An ordered list: The first list item The second list item The third list item An unordered list: List item List item List item ??????? ?????? ???? ??

    33. HTML Unordered Lists An unordered list starts with the <ul type=“type”>. Type: Specifies the kind of marker (disc, square, circle) Each list item starts with the <li> tag. The list items are marked with bullets <ul type=“circle”> <li>Coffee</li> <li>Milk</li> </ul> Coffee Milk ??????? ?????? ???? ??

    34. HTML Ordered Lists An ordered list starts with the <ol type=“type” start=“symbol”> tag. Type: Specifies the kind of marker (1,A, a, I,i) Start: Specifies the start value Each list item starts with the <li> tag. The list items are marked with numbers. <ol type=“1” start=“3”> <li>Coffee</li> <li>Milk</li> </ol> Coffee Milk ??????? ?????? ???? ??

    35. HTML Forms and Input HTML Forms are used to select different kinds of user input. HTML forms are used to pass data to a server. A form can contain input elements like: text fields, checkboxes, radio-buttons, submit buttons, select lists, textarea and … The <form> tag is used to create an HTML form: <form> . input elements . </form> ??????? ?????? ???? ??

    36. HTML Forms - The Input Element The most important form element is the input element. An input element can be of type text field, checkbox, password, radio button, submit button, and more. <input type=“value" /> ??????? ?????? ???? ??

    37. Text Fields <input type="text" /> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form> ??????? ?????? ???? ??

    38. Password Field <input type="password" /> defines a password field: <form> Password: <input type="password" name="pwd" /> </form> ??????? ?????? ???? ??

    39. Radio Buttons <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices <form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form> ??????? ?????? ???? ??

    40. Checkboxes <input type="checkbox" /> defines a checkbox Checkboxes let a user select ONE or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle1" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle2" value="Car" /> I have a car </form> ??????? ?????? ???? ??

    41. Submit Button <input type="submit" /> defines a 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 name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <br /> <input type="submit" value="Submit" /> </form> ??????? ?????? ???? ??

    42. drop-down menu create a simple drop-down list. <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> ??????? ?????? ???? ??

    43. textarea element create a multi-line text input control. In a text-area the user can write an unlimited number of characters. <form action=""> <textarea rows="10" cols="30"> The cat was playing in the garden</textarea> </form> ??????? ?????? ???? ??

More Related