1 / 15

The basic HTML

The basic HTML. School Net Japan Naoto Kurimoto. Today’s Goal. Understanding the basic structure of HTML How to use basic HTML tag <br>, <font>, <center>, <table>, <hr>, <a href>, <img src>, etc… Making the introduction web page HTML = H yper T ext M akeup L anguage.

suki
Download Presentation

The basic 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. The basic HTML School Net Japan Naoto Kurimoto

  2. Today’s Goal • Understanding the basic structure of HTML • How to use basic HTML tag <br>, <font>, <center>, <table>, <hr>, <a href>, <img src>, etc… • Making the introduction web page • HTML = Hyper Text Makeup Language

  3. The basic structure of HTML <html> <head> </head> <body> </body> </html> Write the information of web site From <html> to </html> is all. Write the content of web site

  4. Practice 0 • Start “Note Pad”.

  5. Practice 1 • Type The basic structure of HTML <html> <head> </head> <body> </body> </html> • Save to your folder as the “index.html”

  6. Practice 2 • W click “index.html” in your folder  Display • You can confirm white web site.

  7. Practice 3 • Type & add <title>Self-Introduction</title> <html> <head> <title>Self-Introduction of your name</title> </head> <body> </body> </html> • Save! • What is changing ?

  8. Practice 4 • Type & add from <body> to </body>! The part of yellow is yours. … <body> Self-Introduction My name Naoto Kurimoto My school TAKI high School </body> </html> • Save! • What is strange?

  9. Practice 5 You need <br> • Type & add <br> … <body> Self-Introduction<br> My name Naoto Kurimoto<br> My school TAKI high School<br> </body> </html> • Save! • What is changing?

  10. Practice 6 You need <font>to change the size & color of text • Type & add <font size=“ ” color=“ ”> … <body> <font size=“7” color=“red”>Self-Introduction</font><br> My name Naoto Kurimoto<br> My school TAKI high School<br> </body> </html> • Save! • What is changing?

  11. Practice 7 You need <center>to center the text • Type & add <center></center> to center the text … <body> <center> <font size=“7” color=“red”>Self-Introduction</font><br> My name Naoto Kurimoto<br> My school TAKI high School<br> </center> </body> </html> • Save! • What is changing?

  12. Practice 8 You need <hr>to make the horizontal line • Type & add <hr> to make the horizontal line … <body> <center> <font size=“7” color=“red”>Self-Introduction</font><br> My name Naoto Kurimoto<br> My school TAKI high School<br> <hr> </center> </body> • Save! • What is changing?

  13. Break Please write your message of Self-Introduction <body> <center> <font size=“7” color=“red”>Self-Introduction</font><br> My name Naoto Kurimoto<br> My school TAKI high School<br> <hr> My message … <hr> </center> </body> …

  14. Practice 9 You need <img src=>to put the image data • Type & add <img src=…> to put the image data … <body> <center> <font size=“7” color=“red”>Self-Introduction</font><br> My name Naoto Kurimoto<br> My school TAKI high School<br> <hr> My message … <hr> <img src=kurimoto.JPG> </center> </body> … • Save! • What is changing?

  15. Practice 10 You need <a href=>to make the link • Type & add <a ref=“…”>…</a> to make the link … <body> <center> <font size=“7” color=“red”>Self-Introduction</font><br> My name Naoto Kurimoto<br> My school TAKI high School<br> <a href=“http://www.taki-hj.ac.jp”>My school Web Page</a> <a href=“h-f.html”>Healthy food in Nepal</a> <hr> My message … <hr> <img src=kurimoto.JPG> </center> </body> … • Save! • What is changing?

More Related