View
212
Download
0
Category
Preview:
Citation preview
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 = Hyper Text Makeup Language
The basic structure of HTML
<html>
<head>
</head>
<body>
</body>
</html>
Write the informationof web site
Write the contentof web site
From <html>to </html> is all.
Practice 0
• Start “Note Pad”.
Practice 1
• Type The basic structure of HTML
<html><head></head><body></body></html>
• Save to your folder as the “index.html”
Practice 2
• W click “index.html” in your folder Display
• You can confirm white web site.
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 ?
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?
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?
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?
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?
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?
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>…
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?
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?
Recommended