Please open 'Memo Cho' on your school PC. Kevin will show you how to make a very simple HTML document using only HTML code.
You will need these images for HTML practice. Please download both images and save them on your desktop.
HTML Practice
1) Copy the code below.
2) Paste it onto a blank Memo Cho page.
3) Save it on your desktop as Test2.html
<html>
1) Copy the code below.
2) Paste it onto a blank Memo Cho page.
3) Save it on your desktop as Test2.html
<html>
<head>
<title>HTML Document Tags Practice</title>
</head>
<body>
<img src="smile.jpg">
<center><h1>Making Web Pages (Size 1 Header)</h1>
<h2>Making Web Pages (Size 2 Header)</h2>
<h6>Making Web Pages (Size 6) Header)</h6>
</center>
The horizontal line below is created by using the "HR" tag.
<HR>
<H2>Text in an HTML document</H2>
The appearance of text on a Web page is mainly determined by settings in the browser. However, some changes can be made using tags. A tag is a "command" or specification in an HTML document; a tag is enclosed in "greater than" and "less than" symbols (< >). Text can appear in <b>bold</b>, <i>italics</i>, or both <b><i>bold and italics</i></b>. It can also be <u>underlined</u>.
<p>
HTML allows fonts and font sizes to be specified. Font sizes from <font size="1">one (the smallest) to </font><font size="7">seven (the largest)</font>can be designated (size 3 is the default). Also, <font face="helvetica, arial"> a particular font can be indicated, </font>but the font must be present on the user's computer.
<p>
Line breaks are determined by the size of the font and the width of the window on the computer. It is possible to make a line break using the<br>"BR" command<br>where desired. The "p" tag<p>creates a space between paragraphs. Note that a
line break in the source document does not create a break when the document is viewed in a browser.
<p>
Information can be put into a table. Tables are a little complex, but they are sometimes handy.
<p>
<center><table border=2>
<tr><td></td><td>Column 1</td><td>Column 2</td><td>Column 3</td></tr>
<tr><td>Row 1</td><td>Yuriko</td><td>Rie</td><td>Ikuko</td></tr>
<tr><td>Row 2</td><td>Akiko</td><td>Chisato</td><td>Yuka</td></tr>
<tr><td>Row 3</td><td>Risa</td><td>Kevin</td><td>Santa</td></tr></table></center>
<p>
Bulleted and numbered lists can be made. This is an unordered or bulleted list with three items:
<BR>
<UL>
<LI> beer
<LI> wine
<LI> sake
</UL>
This is a numbered list:<P>
<OL>
<LI> beer
<LI> wine
<LI> sake
</OL>
<hr>
<H2>Links</H2>
A useful feature of HTML documents is that the author can create links to other places.
<p>
This link takes the user to another document called <a href="test1.html">Test1</a> located on the desktop, just like this document.
<p>
<b>Other Web Sites</b><br>
It is also possible to link to other web sites connected to the Internet.
<p>
Here are some links to some interesting sites:<br>
<a href="https://www.japantimes.co.jp/">The Japan Times</a><br>
<a href="https://onelook.com/">OneLook Dictionary Search</a><br>
<p>
<hr>
<H2>Graphics and Color</H2>
<IMG SRC="Oceanic_Whitetip_Shark.jpg" ALIGN=LEFT
HSPACE=6 VSPACE=3 BORDER=0> Graphics are made using a draw or paint program, scanned
from hard copy, or downloaded. The most common types of images are the JPG, GIF, and PNG. The photo on the left was saved in JPG format.
<p>
By default, the background color and the color of the text are determined by settings in the "preferences" or "options" menu of the browser. However, colors can be set for the background and for the text. Color names can be used for <font color="black">black, </font><font color="white">white,
</font><font color="red">red, </font><font color="green">green, </font><font color="blue">blue, </font><font color="yellow">yellow, </font><font color="magenta">magenta, </font><font
color="cyan">and cyan.</font> (Note that on a white background, white text is not visible).
<p>
Colors can also be chosen using color codes. For example, the instruction FONT="#000000" makes the text black. For a list of the codes for 216 colors, check out the <a href="https://www.w3schools.com/colors/colors_picker.asp">HTML Color Picker</a>.
</body>
</html>
No comments:
Post a Comment