Week 2
In the past week, you’ve been familiar with HTML, created a simple HTML file, and worked with some special commands to modify text. This week, you’ll be doing some more labs as you continue your familiarity with HTML.
Resizing Posts on a Web Page
There are two ways to control the size of text displayed by the browser:
- using heading styles,
- set the font size of the main document or the current font size.
Six heading tags are used: from <H1> to <H6> (double tag, i.e. requires closing). Each tag has a specific style defined by the browser settings.
Setting the current font size
The <FONT> font tag allows you to set the size of the current font in individual places of the text in the range from 1 to 7.
Setting the typeface and font color
The <FONT> tag provides control over the typeface, color, and size of the text.
Changing the typeface of the text is done by simply adding the FACE attribute to the <FONT> tag. For example, to display text in Arial font, you would write:
<FONT FACE=”ARIAL”>To change the font color, you can use the COLOR=”X” attribute in the <FONT> tag. Instead of “X”, you need to substitute the English name of the color in quotation marks (“ ”), or its hexadecimal value. When specifying a color by a hexadecimal number, it is necessary to present this color decomposed into three components: red (R – Red), green (G – Green), blue (B – blue), each of which has a value from 00 to FF. In this case, we are dealing with the so-called RGB format.
Examples of writing text in RGB format are shown in the Table:
Laboratory work №1.
Highlighting text fragments
Step 1. Open the text of the tuesday,HTML webpage in the notepad you created last week (tuesday.html right-click the file 1 time, open with… and select the Notepad application).
Step 2.Edit the tuesday.html file
<HTML>
<HEAD>
<TITLE>HTML Tutorial</TITLE>
</HEAD>
<BODY>
<B>Class</B>
<I>schedule</I>
<U> for Tuesday</U>
</BODY>
</HTML>
Step 3: Save your changes, refresh and open the web page in a browser.
Step 4: Analyze the HTML code by looking at the result that appears in the browser.
Laboratory work №2.
Resizing Posts on a Web Page
Step 1. Open the text of the tuesday.HTML webpage in the notepad.
Step 2: Make changes to the tuesday.HTML file
<HTML>
<HEAD>
<TITLE>HTML Tutorial</TITLE>
</HEAD>
<BODY>
<P><H1>Class</H1></P>
<I>schedule</I><U>for Tuesday</U>
</BODY>
</HTML>
Step 3: Save your changes, refresh and open the web page in a browser.
Step 4: Analyze the HTML code by looking at the result that appears in the browser.
Laboratory work №3.
Setting the current font size
Step 1. Open the text of the tuesday.HTML webpage in the notepad.
Step 2: Make changes to the tuesday.HTML file
<HTML>
<HEAD>
<TITLE>HTML Tutorial</TITLE>
</HEAD>
<BODY>
<FONT SIZE="7">Class</FONT>
schedule for tuesday
</BODY>
</HTML>
Step 3: Save your changes, refresh and open the web page in a browser.
Step 4: Analyze the HTML code by looking at the result that appears in the browser.
Laboratory work №4.
Setting the font color
Step 1. Open the text of the tuesday.HTML webpage in the notepad.
Step 2: Make changes to the tuesday.HTML file
<HTML>
<HEAD>
<TITLE>HTML Tutorial</TITLE>
</HEAD>
<BODY>
<U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">
Class</FONT></B></I></U> schedule for tuesday
</BODY>
</HTML>
Step 3: Save your changes, refresh and open the web page in a browser.
Step 4: Analyze the HTML code by looking at the result that appears in the browser.
Laboratory work №5.
Align text horizontally
Step 1. Open the text of the tuesday.HTML webpage in the notepad.
Step 2: Make changes to the tuesday.HTML file
<HTML>
<HEAD>
<TITLE>HTML Tutorial</TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<FONT COLOR="#008080" SIZE="7">
<B>Class</B></FONT><BR>
<FONT SIZE="6"><I> schedule for tuesday</I></FONT>
</P>
</BODY>
</HTML>
Step 3: Save your changes, refresh and open the web page in a browser.
Step 4: Analyze the HTML code by looking at the result that appears in the browser.