HTML

How do you create a single line break within a paragraph? Display the following: This is a line break

<br/> <p>This is <br/> a line break</p>

The ___ element is often used as a container for other HTML elements. It defines a ___ section in a document. When used together with some CSS styling, the element can be used to style blocks of content. Create a block of content using this. The background should be green, letters within it should be white,

<div> ; block level <div style="background-color:green;color:white; padding:20px;"> <p> Some paragraph text goes here. </p> </div>

HTML forms are used to collect information from the user. Forms are defined using the ____ element, with its opening and closing tags.

<form>

A page can be divided into frames using the ___ tag. It defines one specific window (frame) within a ___. Each frame within this can have different attributes, such as border, scrolling, the ability to resize, etc.

<frame>;<frameset>

What is a markup language?

Unlike a scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content. Key: Tags, not scripts.

Which attribute contains the URL address of the webpage that is loaded after a form submission?

action

Create a submit button using input. After a form is submitted, the data should be processed on the server using a ___, such as PHP, which stands for ___.

<input type="submit" value="Submit"/> programming language; hypertext preprocessor.

What is contained within the body tag?

All visual-structural elements (headings, paragraphs, lists, quotes, images, links, etc)

What type of editor is used to edit HTML code?

Text editor

When formatting text, can you get the same result when using different tags?

Yes

You can insert ___ elements inside ___ elements, but not the other way around.

inline ; block

What is the attribute used to change background color? Create a table with 1 row and 3 columns. From left to right, have each respective cell have the colors red, yellow, and blue. Make border=2 and align the table to the right. *In the case of styling elements, CSS is more effective than HTML

'bgcolor' <table border="2" align="right"> <tr> <td bgcolor="red"><br/></td> <td bgcolor="yellow"><br/></td> <td bgcolor="blue"><br/></td> </tr> *In the case of styling elements, CSS is more effective than HTML

Notepad may act as your HTML text editor. To visualize it, you must save it with the ending...

.html or .htm This will visualize your text on your browser

Within the body tags, HTML has ___ different levels of headings, which are ranked according to importance. They are as follows:

6; <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

How to comment within HTML code?

<!--comment-->

What surrounds all HTML code?

<>

In HTML, links are defined using the ___ tag. The ___ attribute is used to define the link's destination address. Set one up with a link to google within it. The text should display as 'Google'.

<a>; href <a href="https://www.google.com/">Google</a>

How could we modify the horizontal line tag so that it has a width of 50 pixels? Other than pixels, what other measurement units can be used for the width attribute?

<hr width="50px"/> The unit of %

How to include a horizontal line?

<hr/> This can be fit in between different text within the body

Write the syntax for adding an image. How do you find out the name and path of a picture?

<img src="(file path)\(file name).jpg" alt=""/> To figure out the path and name of an image, right click it and click properties

Define an image size to have a height of 150 pixels and a width of 150 pixels, and a border 1 pixel thick (Units of px or %)

<img src="(file path)\(file name).jpg" height="150px" width="150px" border="1px" alt=""/>

The ___ tag is used to insert an image. It contains only attributes and does not have a ___.

<img>; closing tag

To take in user input, you need the corresponding form elements, such as text fields. The ___ element has many variations, depending on the type attribute. It can be a text, password, radio, URL, submit, etc. Create a form where the result displays username and password.

<input>; <form> <input type="text" name="username"/><br/> <input type="password" name="password"/> </form>

The ___ element provides a way for browsers that do not support frames to view the page. The element can contain an alternative page, complete with a body tag and any other elements .

<noframes>

The ___ attribute is used to specify that a user cannot resize a <frame> element. Frame content should be defined using the ___ attribute.

<noresize>; src

An ordered list starts with the ___ tag, and each list item is defined by the ___ tag. This will display list as numbers. You can also have an unordered list using the tag ___. This will display list as bullets. Create a list that displays the following: 1. Red 2. Blue 3. Green

<ol> ; <li> ; <ul> For memorizing, think of 'ol' as ordered list, 'li' as list item, and 'ul' as unordered list. <ol> <li>Red</li> <li>Blue</li> <li>Green</li> </ol>

The align attribute is used to specify how the text is aligned (right, left, center) Center the following text: Hello World!

<p align="center"> Hello World! </p>

What tag is used to create a paragraph?

<p>

Create code, with the opening and closing <p> tags, to say "Hello world!".

<p> Hello world! </p>

Assuming you are within the body tags, how would you display these separate paragraphs? Hello World! HTML is easy!

<p>Hello World!</p> <p>HTML is easy</p>

The ___ element is often used as a container for some text. It defines an ___ section in a document. When used together with some CSS styling, the element can be used to style parts of text. Create a heading text that says "Some Important Message", but have the word Important be in red font.

<span> ; inline <h1> Some <span style="color:red">Important</span> Message<h1>

Tables are defined using the ___ tag. They are divided into table rows with the ___ tag. Table rows are divided into table columns with the ___ tag. What does the latter stand for? Make a table with two rows and three columns. The border should have a thickness of "3".

<table>; <tr>; <td> Think of 'td' as table data. This tag acts as data containers within the table. <table border="3"> <tr> <td><br/></td> <td><br/></td> <td><br/></td> </tr> <tr> <td><br/></td> <td><br/></td> <td><br/></td> </tr> </table>

To place a title on the tab describing the web page, add a ___ element within your ___ section. Organize this section to display "First Page"

<title>; head <head> <title>First Page</title> </head>

Which tag contains the cell tags besides the table tag?

<tr>

What is a 'non visual element'? Where are they contained?

An element that helps the web page to work which is not seen on the web page itself. They are contained within the head tag.

What are block level elements? Inline elements?

Block level elements start from a new line. Examples of these are <h1>, <li>, <ol>, <ul>, <p>, <table>. Inline elements are normally displayed without line breaks. Examples of these are <a>, <strong>, <img>, etc.

What follows the opening HTML tag? What follows that?

The head of the document, <head>, follows the opening HTML. After the head of the document closes, </head>, the body tag follows, <body>.

An HTML element is written using...

The start and end tags, as well as the content in between.

What is an HTML attribute? Where are they specified?

They provide additional information about an element or a tag, while also modifying them. They are specified in the start tag.

In a table, how can you join columns together? Rows? Create a table with 3 columns and 2 rows (border=4). Within the 2nd row, have 2 out of the three columns joined. Put your table in the center of the page.

Using the attribute 'colspan'. The <br/> tag should be used in those spaces where you have no content. <table border="3" align="center"> <tr> <td><br/></td> <td><br/></td> <td><br/></td> </tr> <tr> <td><br/></td> <td colspan="2"><br/></td> </tr> </table>

In the case where an image cannot be displayed, the ___ attribute specifies an alternative text that describes the image in words.

alt

Formatting elements are used to display special types of text. What are the tags for the following (letters are fine) bold, italicized, underline, big, small, strike through

b (or strong), i (or em), u (or ins), big, small, del Apparently there is a difference between b and strong, i and em, u and ins. The text in parentheses are apparently seen as "important".

The ___ attribute can be used to change the web page's background color. Colors are displayed in combinations of RGB. Hex values are written using the ___ symbol, followed by either three or six hex characters. Create a black background within a body element. Give it a white headline.

bgcolor; # <body bgcolor="#000000"> <h1> <font color="#FFFFFF"> White Headline </font> </h1> </body>

Fill in the blanks (4): <html> <body> <___ method="POST:> <___ src="image.jpg" /><br/> <input ___="text" name="name"> <input type="___" name=Submit> </form> </body> </html>

form; img; type; submit

HTML colors are expressed as ___ values. What are they? Which represents the lowest value? The highest?

hexadecimal; 0-9 and A-F; 0 is lowest (black) while F is highest (white)

Which attribute specifies the HTTP method (GET or POST) to be used when forms are submitted?

method

The ___ attribute specifies a name for a form.

name

In regards to form elements, if we change the input type to ___, it allows the user to select only one of a number of choices (such as male or female). The type ___ allows the user to select more than one option. Create a form where the result displays two choices, Male and Female.

radio; checkbox <form> <input type="radio" name= "gender" value="male"/> Male<br/> <input type="radio" name="gender" value="female"/> Female<br/> </form>

The <frameset> element specifies the number of ___ or ___ in the frameset, as well as the number of ___ (or percentage) of space each of them occupies. Set one up and assign it values.

rows; columns; pixels <frameset cols="100, 25%, *"></frameset> <frameset rows="100, 25%, *"></frameset>

An image's URL (address) can be defined using the ___ attribute.

src

The ___ attribute specifies where to open the linked document. For example, giving a ___value to your attribute will have the link open in a new window or new tab. Set up the text 'Google' with the appropriate google hyperlink. Set up the attribute to have it open in a new tab.

target; _blank <a href="https://www.google.com" target="_blank">Google</a>

When you use the GET, the form data will be ___ in the page address. When you use the POST, the form is ___ data. Which of the two offer better security due to the data not being visible in the page address?

visible; updating; POST

What does HTML stand for?

HyperText Markup Language