By Ryan Stevenson. Guidebook #2 HTML

Transcription

1 By Ryan Stevenson Guidebook #2 HTML

2 Table of Contents 1. HTML Terminology & Links 2. HTML Image Tags 3. HTML Lists 4. Text Styling 5. Inline & Block Elements 6. HTML Tables 7. HTML Forms

3 HTML Terminology & Links Links are used on almost every website and are also fairly easy to understand, so they are a good place to begin learning HTML. Before I dive into explaining HTML links, here is some basic HTML terminology that I will be using: TAG HTML is based on tags. A tag is surrounded by less than and greater than symbols. The name of the tag is actually an HTML command that does something specific. ATTRIBUTE An attribute is found inside of a tag and provides additional information/variables for the tag command. Each attribute should be separated from other attributes and/or the tag name by a space. The name of the attribute is followed by an equal sign and then the value of the attribute is surrounded by quotes. Single or double quotes are both fine to use, but you should make a habit of using one or the other (I typically do double quotes for HTML and single quotes for other coding, like PHP). CLOSING TAG Some (but not all) HTML tags require closing tags the others are self-closing. A closing tag looks exactly like the opening tag, except that there is a forward slash in front of the tag name. HTML Link Basics Now I can show you a real HTML link example to demonstrate that terminology. Here is a full HTML link, which I will explain in more detail below: <a href= target= _blank >Ryan Stevenson Plugins</a> This line of HTML code begins with a less than symbol: < The tag name for an HTML link is: A You can see a lower-case a after the less than symbol this is the tag name for the link. It is OK to use either lower-case or upper-case for your tag names and tag attributes. After the tag name is a space and then a tag attribute, href. This attribute name is followed by an equal sign: = Next, you can see double quotes surrounding the website address:

4 That website address URL is where the visitor will be taken when they click the link. Next is another space followed by another tag attribute: target. Just like the href attribute, this attribute is followed by an equal sign with the value surrounded by double quotes. The target attribute tells how to open the link URL in the visitor's browser. If you do not specify the target attribute for an HTML link tag, _self is the default value used. I have used _blank as my value for this example, but here are all of the accepted values of the target attribute: Attribute Value Description _blank _top _self _parent Load link URL in a new window. Load link URL in the full body of the window. Load link URL in the same frame. Load link URL in the parent frame. You can also specify the name of a frame as the target value to open the link URL in that named frame. After the closing double quote for the target attribute value, there is a greater than symbol to end the opening link tag: > Next, you will see some text: Ryan Stevenson Plugins That text is the anchor text used for the link, which is the text that is turned into a clickable link when viewed on a website. I just used simple text for this example, but you can actually use complicated text and even additional HTML coding inside of the link if needed. As a practical example, you could also have an image HTML tag here. Finally, to end the link, you need a closing tag. This closing tag specifies the ending of the link anchor text. It is nothing more than the tag name with a forward slash in front of it and then all of that surrounded by less than a greater than symbols: </a>

5 HTML Image Tags Another commonly used HTML tag places images on your website. If you're using a content management system, like WordPress, you can easily upload images to your website and automatically insert HTML tags for them into your content. Despite that fact, it is still good to know how this tag works so you can make your own custom changes to it or even use it outside of WordPress. The HTML code below generates an image: <img src= border= 0 width= 250 height= 250 /> IMG is the HTML tag name to display an image. SRC is a tag attribute that designates the website URL of the image file to display, with that URL enclosed in quotes. This tag attribute is required to display an image. BORDER is another tag attribute. The value is a number of pixels for the width of the border surrounding the image. 0 is used as a value to disable the image border, although this border can still be set and/or altered using CSS (will be covered in the next lesson). This is an optional tag attribute. WIDTH and HEIGHT are also optional tag attributes here. If you notice the URL of the image that is specified in the example code, you might notice that the image is labeled as being 350x350 (this is just a label that I have assigned to the URL to help me identify the size easily). If I left off the WIDTH and HEIGHT attributes, the image would be displayed at full size, but these attributes alter the display size. I picked 250 by 250 for the values of these attributes, which will shrink the image slightly. You can also make images larger than their original size in this manner, but too much of an increase will result in low resolution graphics that will likely look poor on your live site. Notice that I maintained the same ratio from the original width/height to the new width/height. This is important if you want to avoid distorting the image when it is resized. As an example, if you had an image that was 400 pixels wide by 200 pixels tall and wanted to display it on your site at half the normal size, you would want to use 200 for the width and 100 for the height to maintain the same ratio. The image tag is a self-closing tag. Note the extra space at the end of the HTML for the example image tag. After that extra space, there is a forward slash and then the closing greater than symbol for the end of the tag: />

6 HTML Lists One of my favorite aspects of HTML are lists because of their versatility. Although lists can become complicated, including CSS coding to change the way they look, basic HTML lists are actually quite simple to use. The next lesson in the Techie Master Class will cover CSS coding with lists, so this lesson will help to get you comfortable with the HTML that builds lists first. The first thing that you need to know about HTML lists is that there are two commonly used types: ordered and unordered. Ordered Lists An ordered list will use ascending numbers (by default) with each item in the list. CSS can be used to change the numbering with these lists to be other things like roman numerals or letters. Ordered lists are started using the OL tag. An ordered list example: 1. First list item 2. Second list item Code to create that list: <ol> <li>first list item</li> <li>second list item</li> </ol> Unordered Lists An unordered list will use bullet points (filled circles) for each item in the list. CSS can also be used with these lists to change this to other symbols, background images, or even nothing at all. Unordered lists are started using the UL tag.

7 An Unordered list example: First list item Second list item HTML code to create that list is below note how it is exactly the same as the previous code except the opening/closing tags ul are used instead of ol. <ul> <li>first list item</li> <li>second list item</li> </ul> List Items Looking at the two example HTML code snippets above, you can see that the two items in each list are surrounded by LI tags (an opening and a closing tag). The item tags are then surrounded by the list tags to create a complete HTML list. Nested Lists Lists can also be nested within themselves to create a hierarchy/outline structure with ease. To create nested lists, just put the HTML code from one list inside of LI tags from another list. You can mix and match the two list types in nested lists. An example nested list: First list item 1. First nested list item 2. Second nested list item Second list item The HTML code to create this nested list:

8 <ul> <li>first list item <ol> <li>first nested list item</li> <li>second nested list item</li> </ol> </li> <li>second list item</li> </ul>

9 Text Styling There are a number of ways that you can style text using HTML, but the preferred way to do so is actually with CSS. As a result, this HTML tutorial is not going to cover some of the outdated HTML tags that will control the design of text (like the font tag to change the text size, color, etc). All of this will be covered in the next class on CSS. Ultimately, HTML wasn't really intended to be used for design, which is one of the main reasons why I don't want to teach too many of the design elements of it that do exist. There are a few simple HTML tags that can easily be used to make some basic design changes to your text that are still worth using, even though these things can still be accomplished using CSS. Bold To make text bold, simply surround it with an opening and closing B tag. The sample below provides example HTML code and the result of that code: <b>bold Text Here</b> creates this: Bold Text Here The STRONG tag is actually considered to be a semantic version of the B tag, which is really just intended to make text bold. STRONG actually indicates that there is some kind of significance for the text enclosed in the tags, making it a preferred method in many cases for SEO purposes. By default, the strong tag will bold the text that it surrounds, but CSS can alter this default behavior. Italics To make text italic, simply surround it with an opening and closing I tag. This works just like the B tag for making text bold. The I tag is also just used for display purposes, while it's counterpart EM is used for semantic meaning and can be altered with CSS. By default EM will also produce italic text, but that can also be changed using CSS. The sample below provides example HTML and the result of that code: <i>italic Text Here</i> creates this: Italic Text Here Underline To underline text, simply surround it with an opening and closing U tag. This tag does not have a counterpart like the previous two tags.

10 The sample below provides an example of the usage: <u>underlined Text Here</u> creates this: Underlined Text Here Strike Through One more useful HTML design tag for text is the S tag, which produces a line through the text. An example of this tag is shown below: <s>strike Through Text Here</s> creates this: Strike Through Text Here

11 Inline & Block Elements Everyone using HTML needs to understand the differences between inline and block elements. Block Elements A block-level element begins it's content on a new line and also forces content after the element to begin on another new line. Some examples of commonly used block elements: DIV P H1,H2,H3,etc.. P is a paragraph tag. If you write two sentences and enclose them in P tags, they will be separated by a blank line. If you use WordPress and the Visual editor to write your page content, each new paragraph of content there is actually enclosed with this HTML tag. WordPress does this automatically when it displays the page. For this reason, WordPress can actually mess up HTML, CSS and PHP code that is entered over multiple lines. This can be fixed by simply removing space and blank lines between HTML tags, as shown in the example code below for the paragraph tag. Another option will be discussed in the PHP class that will be after the CSS class in this series. This HTML code... <p>my first sentence.</p><p>my second sentence.</p> Displays as... My first sentence. My second sentence. DIV is a division tag and is commonly used along with CSS (can be used to completely control the layout of a site). Without any CSS at all, a DIV tag will still create a new line but without space between the lines. In the next Techie Master Class lesson on CSS, I will be going into more detail about using this tag with CSS for design purposes.

12 This HTML code... <div>my first sentence.</div><div>my second sentence.</div> Displays as... My first sentence. My second sentence. H1, H2, H3, H4, H5 & H6 are all header tags. The number indicates the importance of each tag within your page content and is commonly looked at by search engines to help analyze the semantic meaning behind web pages. H1 is the most important heading on the page and H6 is the least important. It is not necessary to use all of the headings on a single page. Without CSS, the header tags will have larger text when they are more important (H1 is really large text, down to H6 being small text). However, CSS can easily be used to change this and will be discussed more in the next class. I find it to be best to set the H1 tag as the title / main subject of each page on your website. I will then often set the H2 tag as the website title, and then use other header tags for other main points within the content of my pages. Some WordPress themes actually use the first two header tags in the opposite manner, so I try to look at this when picking a theme to use to ensure it is being done right. This makes it easier to target a unique subject on each page of a site. I do not ever use more than one of each H1 and H2 tags on the same page but will sometimes use more than one of the other tags on the same page. Typically, text within header tags will be bold. The sample HTML code below shows how these tags are used: This HTML code... <h1>my first header.</h1><h2>my second header.</h2> Displays as... My first header.

13 My second header. Inline Elements The opposite is an inline-level element, which does not force a line break. SPAN is a commonly used inline element. By setting CSS on a SPAN HTML tag, you can completely change the look of the text within that tag compared with the surrounding text. CSS will be covered more extensively with elements like these in the next class, but a basic example has been used here to show an example usage of an inline element. The STYLE attribute that I have used for the SPAN tags can be used with almost any HTML tag to provide CSS code for that tag. An example of this has been provided below: This HTML code... <div>my <span style= color:#0000ff; >first</span> sentence.</div><div>my <span style= color:#ff0000; >second</span> sentence.</div> Displays as... My first sentence. My second sentence. Many other HTML tags are also inline, such as most of the tags covered in this lesson so far like B, I, U, S, IMG, and A.

14 HTML Tables Once upon a time, people used to control the layouts of their websites using HTML tables. Although this can still be done, you should actually use a combination of DIV and SPAN tags with CSS to accomplish this now. Despite the outdated use for HTML tables, they still have a valid use in modern HTML, which was the original intended purpose for this tag: displaying tabular data. A simple example of a table is a spreadsheet table that simply displays data in rows and columns. However, tables could also be complex HTML comparison tables for affiliate products or for administration systems. I use tables in the administration pages of many of my plugins to manage a list of saved ads, provide some information for each ad and then provide some action buttons to edit or delete each ad. Even with the power of the DIV tag and CSS combined, there are still some things that you simply cannot do with it that can be done with tables. For example, if you have columns of information in a table, the table will automatically resize each column depending on the content in it and still keep all of the columns aligned. If you try to create a similar layout like this with the DIV tag and CSS, you will find that you simply must specify a predefined width for the columns if you want the columns to stay aligned (ie, DIVs aren't very good about stretching horizontally to hold their content if you want them to be positioned in a very specific manner). Some of the above information may not seem important initially, but it would have saved me many wasted hours of coding if I had known that information upfront, so I wanted to begin the tables tutorial with this information. Now moving on to how to code an HTML table. First, to start a table, use the TABLE HTML opening and closing tag. All of the information in the table will go between these tags. Next, each row of information in the table is created with TR opening and closing tags. All of the information for each of the columns within that row will be contained between these tags. Finally, each column of information in each row is created with either TH or TD tags. TH is used for header cells in the table. By default, the information in each header cell will be in bold text and centered in the column, although this can be altered by CSS. TD is used for normal cells in the table. By default, the information in each of these cells will be in regular weight text (not bold) and left aligned in the column, although this can also be altered by CSS. Here is a basic HTML table example:

15 This HTML code... <table border= 1 > <tr> <td>row 1 & Column 1 Text</td> <td>row 1 & Column 2 Text</td> </tr> <tr> <td>row 1 & Column 1 Text</td> <td>row 1 & Column 2 Text</td> </tr> </table> Creates a table like this... Row 1 & Column 1 Text Row 2 & Column 1 Text Row 1 & Column 2 Text Row 2 & Column 2 Text TABLE, TR, TH and TD tags can also accept a number of tag attributes like WIDTH, HEIGHT, COLSPAN, and ROWSPAN. WIDTH and HEIGHT attributes can have values that are specific numbers (in pixels) or percentages of the total width. If you specify a HEIGHT for any tag within a row, the entire row will be that height. The same applies with WIDTH and columns. COLSPAN and ROWSPAN are used to define how many columns and/or rows a cell should take up in the table. Using these attributes, you can create more creative tables. Simply specify the value for one of these attributes as a number, which represents the number of rows/columns to occupy. A new example is provided below incorporating these new attributes. This example also uses TH tags and TD tags:

16 This HTML code... <table border= 1 > <tr> <th colspan= 2 height= 50 > Row 1 Text Spanning Two Colums With Larger Height </th> </tr> <tr> <th rowspan= 2 width= 33% > Column 1 Text Two Rows With Smaller Width </th> <td>row 2 & Column 2 Text</td> </tr> <tr> <td>row 3 & Column 2 Text</td> </tr> </table> Creates a table like this... Row 1 Text Spanning Two Columns With Larger Height Column 1 Text Two Rows With Smaller Width Row 2 & Column 2 Text Row 3 & Column 2 Text

17 HTML Forms Once you start creating custom HTML websites that include javascript and/or PHP programming, you will find that HTML forms are something that you will use heavily. A form provides a way for you to ask a website visitor for information. The programming side of it will then process the form information. This topic will be covered in the PHP class in this course, while this lesson focuses on understanding the basics of HTML forms. To start an HTML form, simply use a FORM opening and closing tag. Everything contained in the form will go between those two tags. Next we need to specify two attributes for the opening FORM tag: ACTION and METHOD. The METHOD attribute needs a value of either GET or POST. This specifies how the information in the form will be sent to get processed. GET puts all of the form variables and values in the URL of the address where the request is sent, while POST puts those variables into global variables. Using GET has it's restrictions including limits on overall variable and value lengths, so POST is recommend for most situations unless you have a specific reason to use GET. The ACTION attribute specifies a website URL to send the form information. If this attribute is omitted, then the current page URL will be automatically used. An example of the opening and closing FORM tags may look like this: <form action= method= post > </form> Next, we need to add input elements to the form (between those two tags). There are a number of different form elements that you can use for input, so some of the most commonly used elements are discussed in this lesson. Before I dive into form field elements, I want to explain some HTML tag attributes that are commonly used among all of these. Most fields require a NAME attribute. The value specified for this attribute controls the variable name when the form input is processed. The value should not have any spaces, but you can can underscores or hyphens instead. For example, if you have named a field first_name in a form that is using the POST method, then the variable will be received in a PHP processing script as: $_POST['field_name'] A field can optionally have an ID attribute. In many cases, this is set to the same value as the NAME attribute because both should be unique on any given page. The ID attribute is used for javascript and for CSS to identify and manipulate the form field, so if you are not using either of those, then you do

18 not need this attribute. Most fields have a VALUE attribute that specifies the value of the field that will get sent to the processing script. Most fields that use this attribute will also show this value to the user. For example, in a text input field, this value is the text that is found in the text box. Hidden Input When you want to include information in a form but don't want your website visitors to be able to see it, you can store it in a hidden input field. Keep in mind that this information can still be seen by simply viewing the HTML source of the page, so be sure not to include sensitive information there. To create a hidden input field, use the INPUT tag with a TYPE attribute set to a value of HIDDEN. You will also need to include NAME and VALUE attributes in this tag. Note how this is a self-closing tag, so I have put an extra space and forward slash at the end before the final closing greater than symbol. An example hidden input field: <input type= hidden name= first_name value= Ryan /> Text Input A text input field is created almost identical to a hidden input field, except the TYPE attribute is set to a value of TEXT instead. This field creates a visible, one-line text box on the page that allows a user to enter text. If you want to change the length of the text box, simply use the SIZE attribute with a value set as a number. This number represents the length of the text input in characters, although the field typically provides a bit of extra space for those characters. The example code below creates a text input field that prompts a user for their name: <input type= text name= first_name value= size= 16 /> Textarea Input If you want a text input field that spans more than one line on the page, you will want to use a TEXTAREA tag. This tag works different from the previous tags I have discussed it is not selfclosing to allow for a large amount of input or predefined text. This tag does NOT use a VALUE attribute. Instead, the value goes between the opening and closing TEXTAREA tags!

19 You can also use the ROWS and COLS attributes to specify the size of the text box. The example below creates a text input box that is 5 lines tall and 60 characters/columns in width. For this example, I have left the value (between the tags) blank, which leaves the input box blank for the website visitor to write their own information, but this space could also be preloaded with information: <textarea name= user_comments rows= 5 cols= 60 ></textarea> Select Input Another commonly used form field is the select input, which is a drop-down box with predefined options. This is created with a SELECT tag. Like TEXTAREA, this is also NOT a self-closing tag, so you need to use an opening and closing tag. Between the select tags, you add an OPTION tag for each of the available options you want to show up in the drop-down box for people to select. Technically, the OPTION tag is also NOT a self-closing tag, but you can actually omit the closing tag for this one (but it also works with the closing tag). Personally, I just leave off the closing OPTION tags for this reason. The NAME attribute goes inside of the SELECT tag. A VALUE attribute is then found inside of each OPTION tag, but this value is not shown on the public website. After each option tag, simply add the text that you want shown to the user for that drop-down item (this text would go between the opening and closing OPTION tags, if you decide to use the closing tags). You can also add the attribute SELECTED to one of the options to make it the default selected option, although the first option will be selected by default if this attribute is not set. It is also worth noting that this attribute doesn't have a value. Here is an example drop-down box created with two options, a Yes and a No the Yes option is selected as the default value: <select name= user_answer > <option value= Yes selected>yes <option value= No >No </select> Submit Button A submit button in the form gives the website visitor a button to click when they are ready to process the information they have entered into the form.

20 A submit button uses the INPUT tag, just like hidden and text box inputs, but this tag uses the SUBMIT type. NAME and VALUE attributes are needed for the button. The value of the VALUE attribute will be the text displayed for the button to the website visitor. This example creates a submit button: <input type= submit name= user_save value= Save /> Field Labels One last thing that is good to know about forms is how to use field labels. A label is just text that tells a user what to input for a particular form field. However, if you click on a label, it will automatically set the focus on the corresponding field element. This is accomplished in an HTML form using the LABEL tag along with the FOR attribute. LABEL needs an opening and closing tag, with the text to be displayed as the label being between the LABEL tags. The FOR attribute in the opening tag needs to have it's value set as the NAME attribute for the HTML element that should receive the focus when this tag is clicked. Below, I have provided a complete example of an HTML form that also uses labels. This form will simply ask someone for their first name and address. <form method= post > <label for= first_name >First Name</label> <input type= text name= first_name value= size= 16 /><br /> <label for= _address > Address</label> <input type= text name= _address value= size= 32 /><br /> <input type= submit name= user_save value= Save /> </form> The example above also introduces another HTML tag: BR. This is a line break and is a self-closing tag. Simply use this whenever you want inline content to move to a new line. If you want more space, just add two of these HTML tags next to each other to create two line breaks.