Web Dev Prelim exam
HTML Page Structure
<html> <head> <title>Page title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
inline style.
A CSS rule written inside an HTML element is called?
HTML
A markup language that tells the browser how to structure web pages; It is the standard markup language for creating Web pages; It describes the structure of a Web page. It consists of a series of elements. An HTML document consists of tags that define elements within the document.
Attributes
An HTML element can contain __________ that define its properties. An HTML ________ is written within the element's opening tag <> after the element name. It appear as name-value pairs separated by an equal sign =. Its name is the property and its value is the value of the property.
<h1>
Defines a large heading, this element is used for the main heading. The content of this element renders the largest text of all the heading elements and indicates the most important heading.
TextEdit, Notepad
Give two examples of a simple text editor. Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor. We believe in that using a simple text editor is a good way to learn HTML.
empty elements
HTML elements that has no content (like the <br> element). Elements that does not have an end tag! An empty element does not require a closing tag because it is a self-closing tag. It has the element name inside angle brackets <> followed by a space and ends with a forward slash /.
title(Common Attributes)
It adds text description and displays a tooltip when the cursor hovers over the element.
class(Common Attributes)
It classifies similar elements.
target
It contains a value that determines where to display the information that is received after form submission.
<nav>
It contains navigation links that link to different web pages.
<header>
It contains the introductory content of a web page. It is where heading elements, search forms, author name, and logos are placed.
<label>
It creates the text description of the <input> element. It uses the for attribute.
<em>
It defines emphasize text that is used to indicate a greater degree of emphasis.
<mark>
It defines marked or highlighted text for reference and notation purposes.
background-color(basic CSS properties)
It defines the background color of an HTML element.
<b>
It defines the bold text that is used to style characters darker than the rest of the other characters.
color(basic CSS properties)
It defines the font color.
font-family(basic CSS properties)
It defines the font type.
text-align(basic CSS properties)
It defines the horizontal text alignment of an HTML element.
<i>
It defines the italic text that is used to style text such as technical terms, mathematical theorems, foreign words, and thoughts.
<sub>
It defines the subscript text that makes text appear in a smaller font and renders half a character below the normal line.
<sup>
It defines the superscript text that makes text appear in a smaller font and renders half a character above the normal line.
<section>
It groups contents of a web page base on purpose or subject.
<fieldset>
It groups related form controls. By default, it generates a border around the grouped form controls.
<aside>
It indicates a part of the content that is indirectly related to the primary content. The content of it element appears as sidebars or call-out boxes.
<strong>
It indicates an important text that is used to convey strong importance.
colspan attribute
It indicates how many columns a cell can span horizontally in a table.
rowspan attribute
It indicates how many rows a cell can span vertically in a table.
<footer>
It indicates the footer of a web page. This is where information about copyright and authorship are written.
Text Editor
It is all you a need to write and learn HTML
Nesting
It is the placement of HTML elements within another HTML element. HTML tags should be nested in a proper order. Inner tags should be closed first before closing the outer tags.
post
It is used to add and update a resource and send data to a server. The collected data is hidden in the URL.
get
It is used to obtain data from a web server. The collected data appears at the end of the URL.
<small>
It makes text appear smaller than the other characters in the document.
<tbody>
It represents a body section that groups a set of rows indicating the body content of a table.
<td>
It represents a data cell that is placed inside the <tr> element.
<tfoot>
It represents a footer section that is placed at the end of a table.
<th>
It represents a header cell that provides header details of the data cells in a table.
<thead>
It represents a header section that groups a set of rows containing header cells.
<article>
It represents a self-contained content of a web page that is intended to be reusable and distributable. It usually contains blog posts, news articles, and other similar content.
<tr>
It represents a table row that contains the header and data cells.
<ins>
It represents text that is added or inserted to the document. Any text written in the <ins> element appears underlined.
<del>
It represents text that is deleted from the document. Any text written in the <del> element appears with a thin horizontal line through it.
<legend>
It sets a caption of the <fieldset> element in the form.
<caption>
It sets a caption of the <table> element.
height attribute
It sets a specific height of an image with its value in pixels.
width attribute
It sets a specific width of an image with its value in pixels.
title attribute
It sets a text description of an image and appears when the mouse cursor hovers over the image.
id(Common Attributes)
It sets a unique identification to an HTML element.
alt attribute
It sets an alternative text when an image is not available or fails to render on a web page.
font-size(basic CSS properties)
It sets the font size
src attribute
It sets the source location of an image.
action attribute
It specifies where to send the collected data after submitting the form.
Learn HTML Using Notepad or TextEdit
Step 1: Open Notepad (PC) or Open TextEdit (Mac) Step 2: Write Some HTML Step 3: Save the HTML Page Step 4: View the HTML Page in Your Browser
Tags and Element
Tags contain the element name inside angle brackets <>. The opening tag <> starts an HTML element and the closing tag </> ends an HTML element.
HTML elements
Tell the browser how to display the content. Label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
property: value
The CSS value in the style attribute is written as
<h6>
The content of this element renders the smallest text of all the heading elements and indicates the least important heading.
Web Browsers
The purpose of ________________ (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly. It does not display the HTML tags, but uses them to determine how to display the document.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
There are six levels of HTML headings: Heading elements <h1>....<h6> are for headings only. They should not be used to make text bold or big
Headings
These elements are used to define headings on a web page. These are defined by <hn> with n being a number between 1 and 6 and defines how the heading is formatted.
style(Common Attributes)
This attribute defines a specific style to HTML elements. It allows cascading style sheet rules to be written inside an element. A CSS rule written inside an HTML element is called an inline style.
<html>
This element is the root element of an HTML page. It encloses the entire HTML document. It signifies the start and end of an HTML document.
<h2>
This element is used for the subheadings and any further sections under subheadings are indicated by <h3>, <h4>, <h5>, and <h6>.
semicolon
To specify two or more CSS property: value pairs, separate each pair with a?
Hyper Text Markup Language
What does HTML stand for?
target attribute values
_blank displays the linked page in a new window or tab. _self displays the linked page in the same window. _top displays the linked page in the entire window. _parent displays the linked page in the parent window.
<input>
an empty element that creates different types of control of the <form> element. The attributes in the
Inline elements
are elements that can be written on the same line with other HTML elements.
HTML element
defined by a start tag, some content, and an end tag: <tagname>Content goes here...</tagname> It is everything from the start tag to the end tag.
<ol>
defines a list of items with a specific order.
<ul>
defines a list of items with no specific order.
<dl>
defines a list of terms with descriptions. It has the following tags
<p>
defines a paragraph, this element represents a paragraph in an HTML document.
<li>
defines an item list in the <ol> and <ul> elements. The attributes of the <li> element are the following: start - It sets the starting point of the list items in an ordered list <ol>. type - It sets a specific type of list item marker.
<!DOCTYPE html>
defines that the document is an HTML5 document. It defines the HTML version or the type of document.
href attribute
defines the destination address of the page to be linked.
<body>
defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. It specifies the content to display on the web page. Contents inside the <body> element are displayed on the browser window.
<a>
defines the links between web pages.
target attribute
defines the specific location on where to open the linked page. It can have the following values:
<title>
element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) Content inside the <title> element is displayed on the browser tab.
<form>
groups section of elements in an HTML document that is used to create a form. It contains interactive controls that collect and send data to a server.
HTML formatting elements
inline elements that add style to text without the use of CSS.
Markup Language
is a computer language that uses tags to add elements in a document.
method
it specifies how to send the form data to the server. It can only have two values either get or post which are HTTP methods.
table
presents content in a grid format. Each grid is referred to as a cell.
<dd>
provides description details of the term.
Hypertext
refers to the way of writing and displaying text that links to a website or different part of the document.
Text formatting
setting a specific style for text in order to achieve the desired text appearance.
<dt>
specifies the name or term.
<head>
this element contains meta information about the HTML page. It contains machine-readable data such as title, scripts, and style sheets that provide information to the web page.
<img>
used to add or insert images in an HTML document. an empty element that does not require a closing tag. It is referred to as a self-closing tag.
<table>
used to create a table.
Indentation
|t enhances the readability of the HTML code. Each element within an element should be indented properly to avoid improper nesting. However, there are other elements like the inline elements that does not need to be indented. All other inner elements which are not inline elements should be indented from the outer element. The <html> tag is the root element that contains the <head> and <body> elements as its inner elements. The <head> element is the outer element that contains the <title> element as its inner element. The inner element <title> should be closed first before closing the <head> element. The <body> element is the outer element that contains the <h1> and <p> elements as its inner elements. The inner elements <h1> and <p> should be closed first before closing the <body> element.