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

• Type & add …<body>Self-Introduction My name Naoto Kurimoto My school TAKI high School </body></html>

• Save!• What is changing?

Practice 6 You need to change the size & color of text

• Type & add 

…<body>

Self-Introduction 

My name Naoto Kurimoto 

My school TAKI high School 

</body>

</html>

Practice 7 You need <center>to center the text

• Type & add <center></center> to center the text…<body><center>Self-Introduction My name Naoto Kurimoto My school TAKI high School </center></body></html>

Practice 8 You need <hr>to make the horizontal line

• Type & add <hr> to make the horizontal line…<body><center>Self-Introduction My name Naoto Kurimoto My school TAKI high School <hr></center></body>

Break Please write your message of Self-Introduction

<body><center>Self-Introduction My name Naoto Kurimoto My school TAKI high School <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>Self-Introduction My name Naoto Kurimoto My school TAKI high School <hr>My message …<hr><img src=kurimoto.JPG></center></body>…

Practice 10 You need <a href=>to make the link

• Type & add <a ref=“…”>…</a> to make the link…<body><center>Self-Introduction My name Naoto Kurimoto My school TAKI high School <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>…

The basic HTML

Documents

Transcript of The basic HTML