HTML
How many types of lists are in HTML?
3 types
How many headings are there?
6 types
<tr>
A tag to define each row
colespan/rowspan
Attributes to change the span of rows and columns. Useful for timetables e.g. <td rowspan="2">Stærðfræði</td>
<dd>
Used to create a definition description
Post Method
Used to send data to the server e.g. registering a new account on Facebook
Empty elements
Elements with no closing tag. Are said to be self closing, hence the " />"
Meta data
Information about the document -Information for the client (e.g. the browser) -Stylesheets -Links to other pages (Note: This is often data that is not visible to the user)
<html>
It states that whatever is wrapped within it, is HTML markup. - It's a container for ALL other HTML elements EXCEPT for the <!DOCTYPE> tag.
<h1>
The primary heading in a HTML document
<label>
Used to label an input field. Two ways to use it: - We can wrap an element that the label is for within the label element. - or we can use the FOR attribute on the label tag (The for attribute must get an id as a value so the input field must have an id)
DOCTYPE
A declaration which states which HTML version is used and which standard is being followed in the document. It tells the browser how to render the page in the standards compliant mode
Definition lists
A list of terms where each term is followed by its definition
Nested lists
A list within a list
HTML (HyperText Markup Language)
A set of markup symbols inserted in a file that is intended to display on a webpage
<head>
A tag for meta data
<p>
A tag for paragraphs
<input>
A tag that can create several different control forms depending on the value of the type attribute
<button>
A tag that defines a clickable button Inside you can put content like text or images. This is the difference between the <button> and the <input type="submit"> element ALWAYS specify the type attribute!
<fieldset>
A tag that is used if the form is too long to break it into a few fields. each fieldset might have a name or a heading/caption <legend> tag is used for the name a form can have many fieldsets and each fieldset can have a legend rendered with a visible border by default
<textarea>
A tag that lets the user input more than a single line of text. Commonly used for comments and reviews.
<select>
A tag that makes a DROP DOWN LIST Each option is represented with an <option> tag that has a value attribute that will be sent to the server when the form is submitted
<table>
A tag to define a table
<img>
A tag used for images. MUST carry two attributes: src and alt
<form>
A tag used to contain a set of elements that make it possible to collect data that is input from the user. Used for everything from a search bar to sign-up applications. It MUST have an action attribute to state the server location to which the input should be sent to. Can be sent using either: -get (default method) (used to retrieve data) -post (send data to the server)
<a>
A tag used to create a link. MUST add a href attribute
<td>
A tag within <tr> for each column
Attributes
An HTML attribute can give us more information about an HTML element - help access elements via JavaScript and CSS - adds data about an element -- A MODIFIER of an HTML attribute - can modify the default functionality of an element. syntax= always added to an HTML opening tag. Attributes are a name-value pair. the value is written between double quotes "..." some attributes can be used on almost any element e.g. - id & class id's should only be used once. class is to group similar elements some elements can only be used on certain elements e.g. - colespan, rowspan and scope - only with <th> and <td> Attributes can be optional or necessary. necessary - href in <a> optional - colespan, id etc.
Child Element
An HTML element that lives within another HTML element
href
An attribute that specifies the destination (the URL) Different values -an absoloute URL - points to another website (http://www.imdb.com) -a relative URL - points to a document/file within a website (about.html) -a link to an element with a specified id within the page ("#top") -a script (a javascript file for example)
alt
An attribute which provides a text description of the external attribute if it is for some reason not visible
src
An attribute which tells the browser where to find an external attribute
submit
An input type for submitting forms. (Doesn't have a name attribute)
<th>
An optional tag to define a table heading
Block Elements vs. Inline Elements
Block elements will always start on a new line. - stack on top of each other Inline elements will render in the same line as their neighbor HTMl element. block elements can contain other block elements or inline elements. <div> used to group elements in one block level container. <span> tag is an inline eqivalent of <div> - used to cantain a section of text where there is no other suitable element to differentiate from the surrounding text. - or to contain a number of inline elements.
Table sections
Can be broken down into 3 sections to make css styling easier <thead> table headers <tbody> for the data in the table <tfoot> for the footer
<body>
Contains all the HTML elements that are visible to the user
Tags
Define every structure in a document
Markup language
Markup languages are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a text file. The code used to specify the formatting are called tags. HTML is an example of a widely known and used markup language Slides
Semantic/Structural elements
Some new elements were introduced in HTML5. Used to better define the structure of a document (i.e. the meaning of the document) <article> - defines self contained areas on a page. <aside> - defines smaller content areas outside the flow of a document. <figcaption> - definees the caption of a figure element <figure> - defines content that containes a figure, such as an image, chart, or pic. <header> <footer> <hgroup> - defines a group of headings <mark> - defines text that should be highlighted <nav> - defines navigation to other pages in the site. <section> defines the distinct content of a document <main> defines the main content of a document
<hr />
Stands for horizontal rule. It is a horizontal line, often used to denote a change in the document or a distinction between two sections in a document
<ol>
Stands for ordered list. The order of the list elements matters. Renders as a numbered list by default
<ul>
Stands for unordered list. An unordered list indicates that the order of the list elements doesn't matter. Renders as a bullet list by default
Table
Tabular data When making HTML tables you have to think of it in terms of a grid made up of rows and columns
<br />
Tag to insert a line break
<li>
The tag for a list item. List items are child elements of the list
What is HTML used for?
To mark and describe each of these kinds of content so the web browser can show them correctly
<dl>
Used to create a definition list
<dt>
Used to create a definition term
Get Method
Used to retrieve data from the server e.g. search input
Form Controls
Used to retrieve data from the user - Text input (used for a single line of text) - Password input ( like a text input but masks the characters that are input. - Text area (is used for longer text such as comments or messages) - Radio buttons (is used when a user can only select one option of many) - Checkboxes (used when users can select multiple options) - Drop-down boxes (is used when a user must pick one option from many possible) - Buttons (used for many applications, submit buttons, event buttons, etc.) - Etc. Almost every form control element needs to have a name element. - it's used for the server to identify each form control to do its work - only form elements with a name attribute will have their values sent to a server when submitting a form.
type attribute
input fields can have various TYPE values. text = text input password = imput is rendered as bullets email = browsers that support HTML5 will display a message if the email is written in an incorrect manner. webpage = browsers that support HTML5 will display a message if the url is written in an incorrect manner. date = the date input will be rendered as a date picker. radio = allow picking one option of many checkbox = allow picking many boxes. reset = defines a reset button that will reset all form values to their default values. color = renders a color picker if the browser supports it. time = renders a time picker if the browser supports it month number range = defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. search datetimelocal = used for input fields to select a date and time (no time zone)