You can highlight words or important information that needs attention by using the _____ tags.

In order to embed a video or movie on a web page, you can use the _____ element.
You have to specify the width and height attributes so that the space required for the video is reserved when the page is loaded.

1: Click on the video that you want to insert into your web page. Right-click on it, then click Properties from the menus.

2: In the properties, in the General tab, find the Location, then copy the source. Click OK.

3: Paste the source or location of the video into your program, and don’t forget to put in the file name and the file type of the video.

You can embed a YouTube video file by using the tag in your HMTL document. An embedded video will play directly on your page. You can control the width and height of the window in which the video file appears.
1. Go to YouTube and open the video you would like to add to your page.
2. At the bottom of the video, click the share button, then click the embed.

3. Copy the code and paste it into your HTML document.

In order to embed an audio file on a web page, you can use the <audio> element. You should also insert text content between the <audio> _____ tags for browsers that do not support the audio element.

You can link YouTube video files to your website so that when a visitor clicks a button, the video file will play.

To specify the style of your font, you can add an attribute as follows: <b></b>, <i></i>, <u></u>, , , <small></small>, <strong></strong>, <em></em>.

Displays the text in boldface

Displays the text in italics

Displays the text with an underline

Displays the text in superscript

Displays the text in subscript

Displays the text with emphasis

Displays the text with strength

Displays the text with small size

We know that tags are composed of angle brackets. How do you then display angle brackets without having the web browser interpret them as part of a tag? In HTML, _____ provide a method of displaying special characters.
Special-character entities are written with an ampersand (&) followed by the entity name and closed by a semi-colon (;). An example of this is &nbsp;. As you can see, nbsp is the entity name, which means non-breaking space. It is a special character entity that displays a horizontal space (you could say it is the counterpart of <br>).

for greater than symbol or >

for less than symbol or <

for slash or /

for copyright symbol or ©

for registered symbol or ®

for ampersand or &

for en dash or –

for em dash or ––

for a non-breaking space

You can add images to your Web page with the use of the _____ tag. The _____ tag supports several attributes, but the src= attribute is the one that specifies the name and location of the image.
You can create an image using Adobe Photoshop, MS Paint, or other image editing programs. You should save your image in JPEG or PNG format and then compress the image so that loading time will be fast. You can reduce the image size by saving your file for the web. Use GIF for logos, animated images, and other images that include text and graphics.

• Joint Photographic Experts Group, or _____ (or JPG): It supports a million colors and has a file name extension of either _____ or jpg. This file format is the most commonly used.

• CompuServe Graphics Interchange Format, or _____, supports up to 256 colors and has the file name extension of _____. This file format is commonly used and can be animated.

• Portable Network Graphics, or _____, supports a million colors and has a file name extension of _____.

• Bitmap, or _____, supports a million colors and has the file name extension of _____. This type of image is not compressed. That’s why it provides the best quality for an image at the cost of file size.

Furnishing your Web page with a design doesn’t end with typography; it only starts from there. Another good way of making your webpage attractive is through the use of images. You can insert a picture on your Web page using the empty tag <img>. To display the image on the page, you have to use the src and alt attributes.

For example: <img src=“D:\Users\PICAR_PC3\Pictures\peniel-header-banner.jpg” alt=“Peniel Header Banner” />

Indicates the image to be inserted. This attribute must be present at all times. ex: <img _____=“PICAR.bmp">

Indicates the _____ text for an image or the text that appears when the mouse hovers over the image and/or when the image cannot be displayed. ex: <img src=“PICAR.bmp" _____="Cannot display">

Indicates the _____ of the image in pixels. If the actual _____ is not specified, the image will be scaled to fit. ex: <img src=“PICAR.bmp" _____="300">

Indicates the _____ of the image in pixels. If the actual _____ is not specified, the image will be scaled to fit. ex: <img src=“PICAR.bmp" _____="300">

You can specify the background image of the page by using the background attribute inside the body tag: <body background=“value”> </body>.

The background image should not overpower the web page; otherwise, your web page’s contents will be difficult to read. You can also add a background color that matches the color of the image.

In choosing a background image, you should remember the following:

1. Use an image that will not distract from the text and main content of the page.

2. Do not use large image files because it will take a long time to load your page.

3. The background should not show boundaries and grids when tiled.

If you look closely, you'll notice that the background image appears repeatedly, and it can't be in the center. We can enhance and modify our background image using CSS, or Cascading Style Sheets, which we will cover in future lessons.

Before you can use a graphic as a hyperlink, you have to create the image first in Photoshop, Paint, or some other program.

The graphics hyperlink is commonly used as follows:

1. Link to the website’s home page.

2. Provide a link to the next, previous, or top of the current page.

3. Provide a link to large, full-size graphics.

4. Provide a link to all pages on a website.

_____s allow you to organize and arrange data into columns and rows. _____s also allow you to divide your page into sections where you can place headers, footers, and navigation links. Almost all websites are laid out using _____s. Before starting to create any kind of _____, whether to control the page layout or present data in tabular format, you should make a plan to help you build your _____ faster and more accurately. A _____ is made up of rows and columns. You can place different elements in each cell, like text or an image.

A table by default has no _____s, so notice that the example on the next page has a value of 1 for the _____ attribute, which gives the table a _____.

Tables arrange and organize content into columns and rows. Basically, they can be made via the container tags <table></table>. Each row within the table is defined by the container tags <tr></tr>. Moreover, each cell or piece of data within a row is defined by the container tags <td></td>.
Remember that the cells <td></td> are placed inside rows <tr></tr> and rows are placed inside the table <table></table>.

There are various ways to change the appearance of your table. You can change the thickness and color of the border, set a certain distance between the contents of the cells and the border around them, set its background color or image, etc. These various ways can be done through the table’s attributes.

Specifically, the rows’ <tr></tr> appearance can be changed as well, and this can be done through their attributes. By default, the contents of table rows are aligned vertically.

The appearance of <td></td> data in each cell can be changed through its attributes. The nowrap attribute needs no value. It just needs to be present in the tag in order for it to provide its effect. Bear in mind that the alignment set on a cell overrides the alignment set on the row.

Cells in the same row can be merged using the colspan attributes <td></td> and <th></th>.

Cells in the adjacent row can also be merged using the rowspan attributes <td></td> and <th></th>.

Merged cells on the same row can also be merged with cells on adjacent rows by combining the rowspan and colspan attributes.

Just like lists, tables can be nested. Web page developers use this technique to enhance the layout and structure even more.

You can also try laying out tables without the border.

You can add an image to a cell by using the tag pair <td><img src=“...”>.

Indicates the horizontal _____ment of the table. ex: <table _____=“center”></table>
left, right, center

Indicates the _____ image of the table. ex: <table _____=“redFlower.jpg”></table>
filename (path could be included) of the image file

Indicates the background color of the table. ex: <table _____=“red”></table>
assigned name or hexadecimal value of the color

Indicates the thickness of the _____ in pixels. ex: <table _____=“2”></table>
number of pixels

Indicates the color of the border. ex: <table _____=“red”></table>
assigned name or hexadecimal value of the color

Indicates the distance (in pixels) between the contents of the cells and the border around them.

number of pixels

Indicates the distance between the cells in pixels.
number of pixels

Indicates the _____ of the table in pixels or percent of the _____ displayed by the Web browser.
number of pixels or number expressed as percent

Indicates the horizontal _____ment of the contents of the row.
left, right, center

Indicates the vertical alignment of the contents of the row.
top, middle, bottom

Indicates the _____ of the row.
assigned name or hexadecimal value of the color

Indicates the _____ of the row in pixels.
number of pixels

Indicates the horizontal _____ment of the contents of the cell.

Indicates the vertical alignment of the contents of the cell.

Indicates the _____ image of the cell.

Indicates the t of the row.

Indicates the _____ of the cell in pixels.

Indicates the _____ of the table in pixels or percent of the _____ of the table.

Inhibit word wrapping in the cell.

It merges multiple cells.

Combines multiple rows.

A _____ is usually made up of several Web pages. What we will now do is create Web pages that are connected to one another, effectively creating a _____.

A _____ is a reference link that allows you to navigate to another page of the same document.

A _____ may be represented by colored text that is underlined or by an image.

links to a page on a different Web site

links to a page on the same Web site

links to a different location on the same Web page

In this part, you will learn how to create anchors (a term used to define a _____) that allow viewers to go to another Web page or file. Anchors can also be used to make email _____s (which will be discussed later). _____s are clicked in order for viewers to jump to the page specified in them. Anchors can be made through the container tag <a></a> and by setting the value of the attribute href as the target destination page.

Indicates the target of the anchor.

Indicates the behavior the Web browser will carry out.

It assigns a name to the anchor, defining an internal bookmark for the page.

the value of the href attribute or target URL will be opened in a new window.

the value of the href attribute or target URL will be opened within the same frame.

the value of the href attribute or target URL will be opened in the parent frameset.

the value of the href attribute or target URL will be opened in the full body of the window.

1 st: Go to your browser and search for the image that you want to put on your website.

2 nd: Right-click on the image, choose “Copy image address.”

3 rd: Paste the image address into your editor.

Note:

• To change the text hyperlink color:

<a href=“MSWord.png” style=“color: #cc00000”>

Microsoft Word

</a>

• To make the visited link a different color from the unvisited link so that visitors can tell where they have been:

<body vlink=“0000ff”>

To link to a page on a different website, you have to first find the destination file path and then copy it into your code to create the link.

You can use graphics or images to take you to another page on your website or to another website.

Examples of codes that you can use to add graphic links:

<a href=“https://www.microsoft.com/en-ph”>

<img src=“D:\Users\PICAR_PC3\Pictures\MSOffice.png” align=“left” width=“100px”>

</a>

The _____ allows you to gather feedback from your readers and work on the data to provide better service. The areas on the _____ are called fields, text fields, or text boxes. The _____ also contains command buttons, such as the Send or Reset buttons. You can also see standard controls such as check buttons, radio buttons, and list boxes.

The _____ attribute is responsible for indicating where the information will be passed, whether it is to another Web page or to a script.

The _____ attribute, on the other hand, is responsible for indicating the _____ of sending the information.

The _____ method of sending information appends the data to the URL. More specifically, the _____ method is basically for retrieving data

The _____ method may update or store data.

Indicates where the information will be submitted.
filename (path could be included), URL

Indicates the method of submitting the information.
Post, get

Assigns a name to the input field. The name can be used for various purposes and is required in most circumstances.
any text (without spaces)

Indicates the type of input field.
text, password, checkbox, radio, submit, reset

Indicates the size of the input field.
any number

Indicates the initial value of the input field. Indicates the label for the submit and reset buttons.
any text

indicates if, by default, the input field (radio button or checkbox) is selected.
none

Textboxes are single-line text input boxes. Usually, textboxes are used for username input and other single-line texts such as names, email addresses, etc., and can be made by keying in text as the value of the type attribute of <input>.

Additionally, you can use the value attribute to set an initial text input. The size attribute then indicates the length of the textbox.

You can create an input field that can span several rows and columns to allow the readers to enter their feedback, requests, instructions, opinions, or any other communication.

Text areas are made via the container tag <textarea> </textarea>. The content of this tag will be displayed in the text area by default.

Example: <textarea name=“textarea1”> This is a text area.</textarea>

Assigns a name to the text area. The name can be used for various purposes and is required in most circumstances.
any text (without spaces)

Indicates the number of rows or the height of the text area.
any number

Indicates the number of columns or the width of the text area.
any number

Indicates the type of word wrapping in the text area.
soft, hard, off

Radio buttons provide the user with a variety of choices from which only one can be selected. Radio buttons can be made by keying in radio as the value of the type attribute of <input>.

Example: <input type=“radio” name=“gender”>

Bear in mind that in a set of radio buttons, only one can be chosen; the name attribute is also used to indicate which set that radio button belongs to. Radio buttons in the same group have similar values for their name attribute.

The checked attribute is applicable for radio buttons to indicate a default selected option. Radio buttons are usually used when the choices are limited to a few.

Unlike radio buttons, check boxes offer users a variety of choices where none, only one, or many may be selected. Check boxes can be made by keying in checkbox as the value of the type attribute of <input>.

Example: <input type=“checkbox” name=“checkboxCS”>

The checked attribute is applicable for check boxes to indicate default selected options.

Like radio buttons, drop-down lists or drop-down menus offer users a variety of choices from which only one can be selected.
Drop-down menus are made via the container tag <select></select>.

Assigns a name to the dropdown menu. The name can be used for various purposes and is required in most circumstances.
any text (without spaces)

Indicates the number of visible items (lines).
any number

Assigns a name to the dropdown menu item. The name can be used for various purposes and is required in most circumstances.
any text (without spaces)

indicates that, by default, the item is selected.
none

A _____ is usually placed at the end of a form, and when clicked, submits the information inputted. It can be made by keying in submit as the value of the type attribute of <input>. For example, <input type=“submit”> Furthermore, the value of the value attribute indicates the label on the button.

A _____ or clear button is usually placed at the end of a form. When it is clicked, it clears all the input information. This can be done by keying in _____ as the value of the type attribute of <input>. For example, <input type=“_____”> Likewise, the value of the value attribute indicates the label on the button.

_____ allows your website visitors to _____s to your web server. A file can be made by keying file as the value of the type attribute of <input>, while the accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).