BASIC HTML PRACTICE Ms Brassard Open Notepad and
BASIC HTML PRACTICE Ms. Brassard
Open Notepad and type the following: <HTML> <HEAD> <TITLE> Your Name</TITLE> </HEAD> <BODY> Content of the document </BODY> </HTML>
Save to HTML in Notepad • Save as Your. Name. Test. html • Save file type to all files
Add a heading size – may go from 1 as largest to 6 as smallest <HTML> <HEAD> <TITLE> Your Name</TITLE> </HEAD> <BODY> <h 1>Content of the document </h 1> </BODY> </HTML>
Add a Break in the Text •
Add a Division in the Text • <div> </div>
Create an Unordered List <ol> <ul> item 1</ul> <ul> item 2</ul> <ul> item 3</ul> </0 l>
Numbered List <ol> <li> item 1</li> <li> item 2</li> <li> item 3</li> </ol>
Create a Hyperlink • <a href=“http: //_______”> click here </a href> You must put the url in quotations.
Add an Image • <img src= “image. jpg” width= “ 200” height=“ 200” border= "0" alt=image name> • Place the image in the same folder as your html doc so the path to the image is clear. • The size is determined by pixels. Play with the pixel size to get the correct fit for your page.
Add color and style to font <FONT FACE=ARIAL SIZE=6> The Curse of Xanadu </FONT> § Font tags: § face: Arial, Courier, etc. § size: e. g. 3, 6 § color: e. g. “RED”, “GREEN”, etc.
Add bold or italics • Bold: <b> some text </b> or <strong> • Italic <I> some text </I> or <em> <FONT FACE=ARIAL SIZE=6> <B>The Curse of Xanadu</B> </FONT> <FONT FACE=ARIAL SIZE=3> by By Gary Wolf, <I>Wired Magazine</I> </FONT>
Background • Use < body bgcolor = “ …” > for a background color with a hex version of a web-safe color: <body bgcolor = “ccffff”> • For a tiled background using an image file: <BODY background="background. Picture. gif">
Color codes • Modern browsers support 140 named colors. Use them in your HTML by name, Hex color code or RGB value. • Find more at: https: //htmlcolorcodes. com/color-names/ Samples RED YELLOW #FF 0000 #FFFF 00 RGB(255, 0, 0) RGB(255, 0) INDIGO #4 B 0082 RGB(75, 0, 130) #FA 8072 RGB(250, 128, 114) SALMON
Table 1. <TABLE> tag, then 1. <TR> defines table rows. Each <TR> represents one row in the table. The number of rows is determined by the number of <TR> 2. <TD> Table data or <TH> Table Header can follow the <TR> tag The number of cells in each row is determined by the number of <TH> (Table Header) and/or <TD> (Table data) tags contained within that row. <TH> text will be in bold, and centered
<TABLE> TR: Table Row <TR > TH: Table Heading <TH>Ticker</TH> <TH>Price</TH> </TR> <TD>MSFT</TD> TD: Table Data <TD>71 1/16</TD> </TR> <TD>KO</TD> <TD>46 15/16</TD> </TR> </TABLE> Every <TD> must have a matching </TD>. Every <TR> must have a matching </TR>.
Scrolling Data <html> <head><title> scrolling text</title></head> <marquee><font face=”sand">Welcome to my website! Be sure to visit again!</marquee> </body> </html>
Multimedia Files • <a href=“filename. extension> listen to sound file </a> • <a href=“sound 1. wav> listen to sound file </a> • <a href=“movie 1. mov> view movie clip </a>
Multimedia File Types File Type Extention/Mime type ================ plain text: . txt HTML document: . html GIF image: . gif or. jpg or. png Acrobat file: . pdf AIFF sound file: . aiff. au. wav MP 3 . mp 3 Quick. Time movie: . mov MPEG movie: . mpeg or. mpg
- Slides: 19