the basic html n.
Skip this Video
Loading SlideShow in 5 Seconds..
The basic HTML PowerPoint Presentation
Download Presentation
The basic HTML

Loading in 2 Seconds...

  share
play fullscreen
1 / 15
Download Presentation

The basic HTML - PowerPoint PPT Presentation

suki
75 Views
Download Presentation

The basic HTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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?