HTML. Asst. Prof. Dr. Kanda Runapongsa Saikaew Department of Computer Engineering Khon Kaen University

Size: px

Start display at page:

Download "HTML. Asst. Prof. Dr. Kanda Runapongsa Saikaew Department of Computer Engineering Khon Kaen University"

Winifred Griffin
5 years ago
Views:

1 HTML Asst. Prof. Dr. Kanda Runapongsa Saikaew Department of Computer Engineering Khon Kaen University 1

2 What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor 2

3 MyFirst Home Page Example: file myfirst.html <html> <head> <title>hello World</title> </head> <body> This is my first homepage. <b>this text is bold</ b> </body> </html> 3

4 MyFirst Home Page via Browser 4

5 HTML Elements HTML documents are text files made up of HTML elements HTML elements are defined using HTML tags HTML tags are not case sensitive, <b> means the same as <B> The W3C recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags 5

6 Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading <h6> defines the smallest heading Example: file headings.html <html><body> <h1>this is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6> </body></html> 6

7 Headings Page via Browser 7

8 Paragraphs Paragraphs are defined with the <p> tag HTML automatically adds an extra blank line before and after a paragraph Example: file paragraphs.html <html><body><p>this is a paragraph</ p> <p>this is another paragraph</p></body></html> 8

9 Paragraphs Page via Browser 9

10 Line Breaks The <br/> tag is used when you want to break a line, but don't want to start a new paragraph The <br/> tag forces a line break wherever you place it Example: file linebreaks.html <html><body><p>this <br/> is a paragraph<br/><br/><br/> with line breaks</p></body></html> 10

11 Line Breaks Page via Browser 11

12 Comments 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 Example: comments.html <html><body><h1>hello</h1></body></html> 12

13 Text Formatting <html><body> <p><b>this text is bold</b></p> <p><strong>this text is strong</strong></p> <p><big>this text is big</big></p> <p><em>this text is emphasized</em></p> <p><i>this text is italic</i></p> <p><small>this text is small</small></p> <p>this is<sub> subscript</sub> and <sup>superscript</sup></p> </body></html> 13

14 Text Formatting via Browser 14

15 Preformatted Text <html><body> <pre>this is preformatted text. It preserves both spaces and line breaks. </pre><p>the pre tag is good for displaying computer code:</p><pre> for i = 1 to 10 next i print i </pre></body></html> 15

16 Preformatted Text via Browser 16

17 Styles The purpose of the style attribute is to provide a common way to style all HTML elements With HTML styles, styles can be added to HTML elements directly by using the style attribute, or indirectly by in separate style sheets (CSS files) 17

18 Sample Styles <html> <body style="background-color:powderblue;"> <h1>look! Styles and colors</h1> <p style="font-family:verdana;color:red"> This text is in Verdana and red</p> <p style="font-family:times;color:green"> This text is in Times and green</p> <p style="font-size:30px">this text is 30 pixels high</p> </body> </html> 18

19 Sample Styles via Browser 19

20 Images In HTML, images are defined with the <img> 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 The syntax of defining an image: <img src="url"> 20

21 The alt Attribute The alt attribute is used to define an "alternate text" for an image The value of the alt attribute is an author-defined text: <img src="boat.gif" alt="big Boat"> The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images 21

22 Images Sample Source code Output <html> <body> <p> You can also use an image as a link: <a href="lastpage.html"> <img border="0" src="images/buttonnext.jpg" width="60" height="38" alt="next"> </a></p> </body> </html> 22

23 Links: Tag <a> HTML uses the <a> (anchor) tag to create a link to another document An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. Syntax: <a href="url">text to be displayed</a> Example: <a href=" of Computer Engineering</a> 23

24 Links: Attribute target With the target attribute, you can define where the linked document will be opened The line below will open the document in a new browser window <a href=" target="_blank">visit Computer Engineering Web</a> 24

25 Links: Attribute name When using named anchors we can create links that can jump directly into a specific region on a page Example: <a name="tips">useful Tips Section</a> <a href=" html#tips"> Jump to the Useful Tips Section</a> 25

26 Sample Links 26

27 HTML Send Mail <html><body><p>this is another mailto link: <a %20Party&body=You%20are%20invited%20to%20a %20big%20summer%20party!">Send mail!</a></p> <p><b>note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p></body></html> 27

28 HTML Send Mail via Browser 28

29 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) Headings in a table are defined with the <th> tag 29

30 Sample Table <html><body><table border= 1 > <tr><th>heading 1</th><th>Heading 2</th></tr> <tr><td>row 1 Col 1</td><td>Row 1 Col 2</td></tr> <tr><td>row 2 Col 1</td><td>Row 2 Col 2</td></tr> </table></body> </html> 30

31 Sample Table via Browser 31

32 Lists Unordered list An unordered list starts with the <ul> tag Each list item starts with <li> tag Ordered list An ordered list starts with the <ol> tag Each list item starts with <li> tag 32

33 Sample Lists <html><body> <ul> <li>ta</li> <li>tom</li> </ul> <ol> <li>188230: Advanced Computer Programming</li> <li>188752: Web Technologies</li> </ol> </body></html> 33

34 Sample Lists via Browser 34

35 Forms A form is defined with the tag <form> A form is an area that contain form elements. Form elements are elements that allow the user to enter information Text fields Textarea fields Drop-down menus Radio buttons Checkboxes 35

36 Form with Text Fields Text Fields are used when you want the user to type letters, numbers, etc. in a form Example <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> 36

37 Form with Password Field Text Fields are used when you want the user to type letters, numbers, etc. in a form Example <form> Username: <input type="text" name="user"> <br>password: <input type="password" name="password"> </form> 37

38 Form with Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices Example: <form> <input type="radio" name="gender" value="male"> Male <br> <input type="radio" name="gender" value="female"> Female </form> 38

39 Form with Checkboxes Checkboxes are used when you want the user to select one or more options of a limited number of choices Example <form> I have a bike: <input type="checkbox" name="vehicle" value="bike"> <br> I have a car: <input type="checkbox" name="vehicle" value="car"> <br> 39

40 Text Areas A text area is a multi-line text input control Example <html><body><textarea rows="10" cols="30">kku opens its first semester in 2009 on June 1 </textarea></body></html> 40

41 Forms with Action When the user clicks on the Submit button, the content of the form is sent to another file The form s action attribute defines the name of the file to send the content to The file defined in the action attribute usually does something with the received input 41

42 Sample Forms with Action Example: <form name="input" action= process.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="submit"> </form> 42

43 Topics to Further Study HTML 5 XHTML 2.0 Google Gears 43

44 References W3Schools, HTML Tutorial, available at 44

Web Publishing with HTML

Web Publishing with HTML MSc Induction Tutorials Athena Eftychiou PhD Student Department of Computing 1 Objectives Provide a foundation on Web Publishing by introducing basic notations and techniques like