Intro to HTML
Strong Emphasis <strong>
Making a word or phrase stand out in HTML can be accomplished with the strong element, <strong>, as follows: <p>What I am about to tell you is <strong>really important</strong>!</p> As you can see, the browser's default style for the <strong> element is bold. Once again, this can easily be changed, as we will learn later when we get to CSS and styling.
Input Example
<input type="text" id="username" name="username" placeholder="Enter your username">
Basic Select aka Drop-Down List
A basic select presents a drop-down list of items for a user to choose from. This can be accomplished in HTML by using the <select> element as follows: <label for="transmission">Select your transmission type: </label> <select id="transmission" name="transmission"> <option>Automatic</option> <option>Manual</option> </select> Notice how the <select> element contains <option> elements. The options are the items that appear in the drop down list. By default, the first option in the list will be "selected". If you want to override this behavior, you can do so by using the selected attribute with no value as follows: <label for="transmission">Select your transmission type: </label> <select id="transmission" name="transmission"> <option>Automatic</option> <option selected>Manual</option> </select> In this example, "Manual" will be selected by default instead of "Automatic". When a form is submitted, the selected option inner text is what will get submitted as the value for the input. So in the above example, the query string would either contain transmission=Manual ortransmission=Automatic. You can override this behavior by specifying a value attribute in the<option> element as follows: <label for="transmission">Select your transmission type: </label> <select id="transmission" name="transmission"> <option value="1">Automatic</option> <option value="2">Manual</option> </select> In this example, the query string will contain transmission=1 if Automatic is selected, ortransmission=2 if Manual is selected. This is often used so you can show the user a human readable option, but send a unique identifier to the back-end as a value.
Block-Level Elements
A block-level element occupies the entire space of its parent element (container), thereby creating a "block." They also begin on new lines. Generally, block-level elements may contain data, other block-level elements, or inline elements. <div> content </div> address, article, aside, audio, blockquote, canvas, div, dd, dl, fieldset, figcaption, figure, footer, form, h1 - h6, header, hr, li, main, nav, ol, p, pre, section, table, ul, video
Query String
A query string is composed of key-value pairs. It begins with a question mark (?). Following the question mark, is the first key-value pair. Key-value pairs are structured as key=value. Key-value pairs after the first will be separated by ampersands (&). ?key1=value1&key2=value2&key3=value3 Whenever you use the GET method in an HTML form, the form inputs will be appended to the url in the format shown above. If you are using a POST method in an HTML form, the inputs will be sent in the body of the HTTP request.
Id Attribute
Additionally, an id attribute with the same value as the name attribute is often specified with the<input>. The id attribute is used for input labeling and also for easy access via JavaScript.
Password Inputs
An <input> element with a type attribute value of password is very similar to a text input. The primary difference is that password inputs are masked so that text that is typed in the box cannot be seen. Here is an example: <input type="password" id="password" name="password" placeholder="Enter Password Here">
Text Inputs
An <input> element with a type attribute value of text is one of the most basic inputs. We have seen it in use in the examples in the previous lessons. Here is another example: <input type="text" id="first_name" name="first_name" value="" placeholder="First Name">
Hidden Inputs
An <input> element with type attribute value of hidden is also like the text input. The main difference would be is that hidden is not viewable in the browser. The hidden field would have a value the developer would set so that value can still get sent along with the form. Example below: <input type="hidden" id="user_id" name="user_id" value="1234">
Inline Elements
An inline element occupies only the space bounded by the tags that define the inline element. Inline elements do not begin with a new line. Generally, inline elements may contain only data and other inline elements. <p>Look, we have an amazing <span>inline</span> element.</p> a, abbr, cite, code, em, q, span, script, sub, sup, strong, button, input, label, select, textarea, img, object, map
Inline/Embedded Stylesheet
Another method of adding styles to a webpage is via an embedded stylesheet. This can be accomplished by using a style element in the head of your HTML page. Let's see an example: <!DOCTYPE html> <html> <head> <title>CSS Test Page</title> <style> .fancy-header { color: blue; text-decoration: underline; } </style> </head> <body> <h1 class="fancy-header">I've got style!</h1> </body> </html> In the above example, you can see that a style tag with some style definitions was included in thehead of the HTML page. You can also see that a class attribute was added to the h1 element that linked to one of the defined styles. We will discuss more about how this happens in the next lesson. For now, all you have to know is that you can add styles directly to the head of an HTML page in this manner. Using this styles in this way provides some of the benefits described in the intro, but not all of them.
Internal Links
Besides transitioning between pages, anchor tags can also be used to take a user somewhere else within the existing document. This can be useful in a table of contents, allowing a user to click an item to jump to a particular section of the document. It is also used for things like allowing a user to jump back to the top of a page. To create a anchored location within an HTML document, use an anchor with no content and an id attribute as follows: <a id="top"></a> In the above example, you can see that an anchor tag, without an href attribute, can be used to create an anchored location within a page. An id attribute with a unique value must be specified as part of the internal anchor. Next, you probably want to link to the anchored location from other areas of your HTML document. To link back to the anchored location, create another anchor with an href that points to the id of the anchored location as follows: <a href="#top">Go to the top of the page</a> Notice that the value of the href attribute of the above anchor element starts with #. This tells the web browser that we want to link to an internal id. Later on, you will see this used again when we get into CSS selectors.
Block Elements
Block elements naturally take up the full width of the page. Elements placed after them will appear below them. Of the elements you have learned so far, the following are block: headings and paragraphs. Block elements can contain other block elements or inline elements.
CSS
CSS stands for Cascading Style Sheets. CSS allows us to customize the presentation of a web page by specifying the colors, fonts, layout, and more. CSS also provides for the separation of the document content from the presentation. This separation has many benefits, including: Content can be used independently of styling for other purposes. Styles can be re-used across pages. Updating styles in a stylesheet that is used in many pages is much more efficient than updating all the pages individually. Bandwidth savings can be significant due to stylesheet caching.
Checkboxes
Checkboxes are used to ask users for input on yes or no questions. For example, "Yes, please sign me up for your mailing list". They are also used to ask a user a question with one or more possible answers. A checkbox can be created using an <input> element with a type of checkbox as follows: Yes/No Question: <input type="checkbox" id="mailing_list" name="mailing_list" value="yes"> <label for="mailing_list">Sign me up for the mailing list!</label> Zero-to-many Answers Question: <p>What operating systems have you used?</p> <label><input type="checkbox" id="os1" name="os[]" value="linux"> Linux</label> <label><input type="checkbox" id="os2" name="os[]" value="osx"> OS X</label> <label><input type="checkbox" id="os3" name="os[]" value="windows"> Windows</label> There are a couple things to notice in the above examples. First, notice how the <input> elements is placed within <label> elements. Also, notice how the labels have unique for attribute values that point to the id values of the checkboxes they correspond to. This allows the text associated with the checkbox to be clicked to activate or deactivate the checkbox. It also helps with web accessibility as mentioned previously. The second thing to notice is that when multiple checkboxes are used for a single question, the samename is used, but the ids are different. Also notice that the name ends with []. Doing this allows some back-end languages to treat the input as an array. If you want a checkbox to be checked by default, you can add the checked attribute with no value as follows: <input type="checkbox" id="mailing_list" name="mailing_list" value="yes" checked> <label for="mailing_list">Sign me up for the mailing list!</label>
Comments
Comments in CSS are accomplished using the following syntax: /* multi line comment */ .fancy-header { color: blue; /* single line comment */ text-decoration: underline; } As you can see, the same syntax is used for both single and multi-line comments.
Comments
Comments in HTML pages look different from what you see in PHP or other programming languages. HTML comments will not be rendered by the web browser, but are viewable in the source of the web page. An HTML comment looks like this: <!-- comment goes here --> <!-- multi line comment here -->
External Stylesheet
Finally, another way to add styles to a web page is to link to an external stylesheet. This is the recommended method, and the one that will provide all of the benefits listed in the intro. Let's check out how this is done: /* this content is stored in a file named "site.css" in a directory named "css" */ .fancy-header { color: blue; text-decoration: underline; } <!DOCTYPE html> <html> <head> <title>CSS Test Page</title> <link rel="stylesheet" href="css/site.css"> </head> <body> <h1 class="fancy-header">I've got style!</h1> </body> </html> As you can see in the example above, an external stylesheet is added via the link element. Thelink element is a void element and therefore has no content or closing tag. A rel attribute should be specified with a value of stylesheet. An href attribute with a value pointing to the stylesheet to include also needs to be specified. Using this method, the fancy-header style can be used multiple times in multiple pages. If you want to change what a fancy-header looks like, you only need to change it in one place and the update will take place anywhere it is used.
Form Inputs
Form inputs can be defined by using the HTML <input> element. The <input> element is a void element, since it doesn't have any inner content.
Submitting Forms
Forms are generally submitted by having a user click on a submit button. To add a submit button to a form, use an <input> that has a type attribute with a value of submit as follows: <input type="submit"> This will create a button that says: "Submit". If you would like to specify alternate text for the button, you can do that via the value attribute as follows: <input type="submit" value="Login"> The above example will create a button that says: "Login". It should be noted that if you add a nameattribute to an <input type="submit>, the value specified will appear along with other form data when the form is submitted. An HTML <button> element can also be used to submit a form. <button type="submit">Login</button> This example will display the same result as the previous one. The main reason to use a <button> over an <input type="submit> is that the <button> element is not a void element and can contain other elements. It also offers more styling possibilities.
External Links
From your experience on the web, you are probably quite familiar with external links. Any link that you click on that takes you to a new page, even within the same website, is an external link. You can build an external link using the HTML anchor element as follows: <a href="http://www.google.com">Go to Google</a> This would appear as: Go to Google As you can see, the anchor element in the above example contains an attribute named href. Thehref attribute is used to specify the web address the web browser should go to when the anchor is clicked. Also, notice that the content of the anchor element is the text that the browser displays for the link. By default, an anchor tag will open the link destination in the same browser window the user is currently using. However, you can tell the browser that a link should be opened in a new window by using thetarget attribute. To open a link in a new window, do the following: <a href="http://www.google.com" target="_blank">Go to Google</a> Instead of opening Google in the current browser window, this will open Google in a new window. There are other possible values for the target attribute, but we will not be using them in our lessons.
Emphasis <em>
Giving emphasis to a word or phrase in HTML can be accomplished with the emphasis element, <em>, as follows: <p>HTML is <em>seriously</em> awesome!</p> basically italics
Attributes
HTML elements can also contain additional data, known as attributes. Let's look at an example: <div id="wrapper"> content </div> In the above example, an id attribute has been added to a div element. Notice that the attribute starts with a name, followed by an equals sign (=), followed by a value in double quotes. There shouldn't be any spaces between any of these components. Attributes can be added to non-void or void elements. We will be covering some valid attributes and their usage shortly.
Form Structure
HTML forms can be defined by using the <form> element. Let's start out by looking at an example of a simple login form. <form method="POST" action="/login"> <div> <label for="username">Username</label> <input id="username" name="username" type="text"> </div> <div> <label for="password">Password</label> <input id="password" name="password" type="password"> </div> <div> <input type="submit"> </div> </form> Do not worry about the contents of the form for now, we will go over the content later. For now, just look at the <form> element and the attributes that go with it. As you can see in the example above, a couple attributes were specified on the <form> element. Let's go through them individually.
Name Attribute
HTML inputs should also have a name attribute that describes what the input is. The name attribute for the input will appear as the key in the query string when the form is submitted.
Definition Lists
HTML provides specific elements for defining a definition list. First of all, a definition list is defined using the <dl> element. A definition list contains definition terms and definition descriptions, defined using the <dt> and <dd> elements, respectively. Let's look at an example: <dl> <dt>DNS</dt> <dd>Domain Name System</dd> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>HTTP</dt> <dd>HyperText Transfer Protocol</dd> </dl> The above example would look something like this: DNS Domain Name System HTML HyperText Markup Language HTTP HyperText Transfer Protocol
Elements
HTML uses elements to describe the data in a web document. These elements help give meaning and context to information being displayed. An element starts with an open tag, <p>, according to the example. The open tag is followed by content, which can be text or additional html elements. Finally, the element ends with a close tag,</p>, according to the example. <p> content </p>
Anchors
Hyperlinks to other pages, or to locations within the current page, are accomplished using the HTML anchor, <a>, element.
Block Quote <blockquote>
If you'd like to make a quote in HTML, you can accomplish that with the block quote element,<blockquote>, as follows: <blockquote>My favorite quote would go here.<blockquote> By default, most browsers will simply indent block quoted text.
Images
Images can be used in web pages by using the image, <img>, element as follows: <img src="https://www.google.com/images/srpr/logo1w.png" alt="Google"> As you can see, the <img> element is a void element, because it has no contents. You can also see that a couple of attributes have been specified as part of the <img> element. src - Source of the image, specified as an absolute or relative url. alt - Alternative text for non-visual or text based browsers. In order to properly display an image, a valid src must be specified. The alt attribute is optional, but really should be included in all <img> elements.
Root Element
In an element-based markup language, the root element is the first element on the page. The element that contains all other elements. <html> </html>
Inline Elements
Inline elements are part of the flow of text in the page. Of the elements you have learned so far, the following are inline: emphasis and strong. Inline elements can be contained within block elements, but not the other way around. For example: Do this: <p><em>Add emphasis to this paragraph.</em></p> Do not do this: <em><p>Add emphasis to this paragraph.</p></em>
Metadata
Metadata, or extended information, can be provided via the <meta> element within the document's<head>. A few examples of things specified via metadata are: search keywords page description page author page character set <meta charset="utf-8"> In the example above, we specified a <meta> element defining the character set for the web page. Notice that there is no close tag for <meta> because it is a void element.
Multi-Select List aka List Box
Multi-select lists are structured almost identically to basic select lists. The only difference is the presence of the multiple attribute with no value as follows: <label for="os">What operating systems have you used? </label> <select id="os" name="os[]" multiple> <option value="linux">Linux</option> <option value="osx">OS X</option> <option value="windows">Windows</option> </select> This works very similarly to the multi-select checkbox example in the previous lesson. The primary difference is in the visual representation. Notice that the square brackets [] are again used after the input name? This is because multiple values are being sent to the back-end and we want to treat the values as an array.
Unordered Lists
One of the simplest forms of a list is an unordered list. Whenever you see a list with bullet points, you are likely viewing the browser's presentation of an unordered list. Unordered lists are defined using the <ul> element. An unordered list should contain list items. List items are represented using the <li> element. Here is an example: <ul> <li>The first list item.</li> <li>The second list item.</li> <li>The third list item.</li> </ul> The above example would look something like this: The first list item. The second list item. The third list item. It should again be noted that the styling of lists, like other elements, can be changed, and anything that represents a non-numbered list of items could accurately be describe using an unordered list. In fact, many web page navigation bars are defined using unordered lists.
Element Style Attribute
One of the simplest ways to add style to an HTML element is by using the style attribute. This is also the least recommended method, because all the benefits described above do not apply to styles applied in this way. Nonetheless, it is still useful to understand that styles can be applied in this way. Let's look at an example: <!DOCTYPE html> <html> <head> <title>CSS Test Page</title> </head> <body> <h1 style="color:blue;text-decoration:underline;">CSS Test Page</h1> </body> </html> In the example above, the h1 element text will be blue and underlined. For now, do not worry about the style details, just look at the syntax. As you can see, a style attribute was added to the h1 element. The value of the style element consists of multiple key-value pairs with a colon between the key and the value. Key-value pairs are then separated by semicolons. As you will see, this syntax is used regardless of how the style is included in the page.
Ordered Lists
Ordered lists are not just bulleted, but instead have some type of identifier that specifies the order. Ordered lists can be defined using the <ol> element as follows: <ol> <li>The first list item.</li> <li>The second list item.</li> <li>The third list item.</li> </ol> The above example would look something like this: The first list item. The second list item. The third list item.
Radio Buttons
Radio buttons are primarily used to allow a user to select one value from a list of values. For example, a web survey may ask a multiple choice question using radio buttons. Radio buttons can be created using an <input> element with a type of radio as follows: <p>What is the capital of Texas?</p> <label> <input type="radio" name="q1" value="houston"> Houston </label> <label> <input type="radio" name="q1" value="dallas"> Dallas </label> <label> <input type="radio" name="q1" value="austin"> Austin </label> <label> <input type="radio" name="q1" value="san antonio"> San Antonio </label>
Void Elements
Some HTML elements, are defined as "void elements". This simply means that they are not meant to contain any content. Since there is no content, a closing tag is not needed and therefore a void element looks like this: <br> According to the HTML5 specification, the following elements are "void elements": area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr From the above list, we will be covering: br - line breaks img - images input - form inputs meta - metadata
Value Attribute
Some input types, like submit, text, and email, can have an initial value set by using the valueattribute.
Placeholder Attribute
Some input types, like text, password, email, and textarea, can have a text overlay that give information about the input that disappears once data is entered for the input. This text overlay is accomplished using the placeholder attribute. The placeholder attribute will not be shown if a value is set for the <input>. Note: The placeholder attribute is supported in Internet Explorer 10+, Firefox, Opera, Chrome, and Safari.
Text Area Inputs
Sometimes we need an input that allows a user to type more than just a word or phrase. For example, what if we wanted to allow a user to compose an email? For larger text inputs, we can use the<textarea> element. Here is an example: <textarea id="email_body" name="email_body">Content Here</textarea> Notice that the <textarea> element is not a void element. The contents between the tags will be rendered as the initial value of the text area. One way to control size of the <textarea> element is the use the rows and cols attributes as follows: <textarea id="email_body" name="email_body" rows="5" cols="40">Content Here</textarea> Later on, we will learn additional ways to size inputs, like the <textarea> element, using styles.
Body
The <body> element is used to define the content that the web browser will display to a user. <body> // actual page content goes here </body>
Head
The <head> element is used to tell the web browser information about the web page. <head> // info for web browsers goes here </head>
Form Action
The action attribute of an HTML form refers to the location that the form data should be sent. This will generally be a location on a web server that can read the inputs and perform some action based on them. If no action is specified, by default, the action will be set to send data back to the current url.
Doctype Declaration
The first line of an HTML document is the doctype declaration. This line is needed to help the browser identify the data that will follow. <!DOCTYPE html>
Form Method
The method attribute of an HTML form refers to the HTTP (HyperText Transfer Protocol) method that should be used to transmit the form data. Some HTTP methods were covered in the prework, but let's review two basic HTTP methods. If no method is specified, by default, the GET method will be used. "GET" Method HTTP GETs are used to request information, without making any changes to data on the server. When a form's method is set to GET, any of the data that the form sends will be appended to the url as a query string. "POST" Method HTTP POSTs are used to make a change to existing data on the server. When a form's method is set toPOST, any of the data that the form sends will not be added to the url, but will instead be embedded in the body of the HTTP request as key-value pairs. If you have ever been asked a question like, "Are you sure you want to re-submit this form?", then you were probably refreshing a page after submitting an HTTP POST. Additional HTTP Methods There are other HTTP methods, such as PUT and DELETE, that will be covered later in the course.
Type Attribute
There are many types of form inputs in HTML. Since most HTML inputs use the same HTML element,<input>, the browser needs a way to distinguish the input type. This is achieved by specifying atype attribute as part of the <input> element. The types we will be covering in this unit are: submit text hidden password checkbox radio
Line Breaks <br>
To define a line break in HTML, you use the line break element, <br> as follows: <p>Gimme a break,<br>gimme a break,<br>break me off a piece... well, you know the rest.</p> The line break element is a void element (doesn't have any content). You shouldn't use two line breaks in a row. Instead, just create a new paragraph. Line breaks also shouldn't be used for spacing visual elements on a page. Remember, HTML elements are used to describe data, not presentation.
Paragraphs <p>
To define a paragraph in HTML, you use the paragraph element, <p> as follows: <p>The text inside the tags will be interpreted as a paragraph.</p> <p>This is another paragraph. The web browser will put some space between paragraphs, just like you would in a typewritten essay.</p> <p> The tags and the text do not have to be on the same line. </p>
Headings
To define in a main heading in an HTML document, you can use an <h1> tag. In fact, the text "Headings", just above this paragraph, is defined using an <h1> tag. Since documents can contain different level headings, HTML provides several different heading levels. The levels, start at 1 as in <h1> and go all the way down to 6 as in <h6>. <h1>Hello There!</h1>
Tables
To display tabular data in an HTML document, you can use the <table> element. Note that the<table> element should not be used to create web layouts, just to display tabular data. HTML tables contain rows, and rows contain columns. Table rows are defined using the <tr> element, and column data is defined using the <td> element. Within the first row (<tr>) of a table, you can place the heading column element, <th>, instead of <td> to designate the contents as a heading. A simple HTML table element looks like this: <table> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> <th>Heading 4</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> <td>Row 1, Column 4</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> <td>Row 2, Column 4</td> </tr> </table> This would look something like this: Heading 1 Heading 2 Heading 3 Heading 4 Row 1, Column 1 Row 1, Column 2 Row 1, Column 3 Row 1, Column 4 Row 2, Column 1 Row 2, Column 2 Row 2, Column 3 Row 2, Column 4
Input Labeling
To label form inputs, the <label> element is used. You may have noticed the labels in the example in the previous lesson. Form labels should be defined along with a for attribute that points to the id of the <input> that the label is for. Here is an example of the proper use of a form label: <label for="username">Username:</label> <input type="text" id="username" name="username">
Hotlinking
Using an image by linking to the file on another website, as we did with the Google logo in the example above, is known as hotlinking. Hotlinking is a discouraged practice because it uses someone else's web bandwidth, and web bandwidth costs money. Instead of hotlinking, you should host your images on your own web site so that you can link to them locally. In order to do that, a new directory should be created in your public web directory specifically to hold the images for your site. Most often, the name of that directory is img. Here is an example of using a relative url to link to a local image: <img src="img/codeup.png" alt="Codeup Logo"> In the example above, the src attribute of the <img> element is set to the relative path img/codeup.png. This means that the <img> element in the example above will look for a file named codeup.png inside the img directory.The rest of the url (the domain name part) will automatically get filled in by the web browser.
Page Title
here is an element, <title>, that gets added to the HTML document's <head> that provides the title to the web browser. <head> <title>My First Web Page</title> </head>