Data Loading...

HTML5 and CSS3 Flipbook PDF

HTML5 and CSS3

104 Views
19 Downloads
FLIP PDF 4.93MB

INTRODUCTION TO

HTML5 & css3 FUNDAMENTALS A Guide to HTML5 and CSS3 Fundamentals

TABLE OF CONTENTS         

Introduction HTML Page Basics CSS Basics Link Basics In-Page Links Link Styles Navigation Menus Arranging Elements Block Spacing

       

Positioning Elements Tables Table Styles Form Basics HTML Form Elements HTML5 Form Elements Form Styles Streaming Contents

INTRODUCTION HTML5 technologies are the latest version of Hyper Text Mark Up Language (HTML), which has been made official by the World Wide Web Consortium (W3C) to be the new standards for the Internet and the future of both personal computing and mobile computing. The core reasons as to why HTML5 has been official standard for new both personal and mobile computing include: •

•

•

•

It supports the multimedia content with the provision of features that permits the scriptable rendering of 2D shapes. The HTML5 technologies aim at substituting Rich Internet Application (RIA) technologies, such as the Adobe Flash technology. You don’t have to install the plugins or player applications, as was the case with previous HTML technologies, to access and view multimedia content on your browser. HTML5 content can run on any type computer system. This technology can help you run content on any mobile device— whether it is an iPhone, Android devices, an iPad, a tablet or any smartphones– which cannot run Flash applications. It is easy to use as it provides an interactive platform to help in the creation of presentations and websites that can be designed with minimal effort.

1

What about CSS3? Well, CSS3 is the latest version of Cascading Style Sheets (CSS). CSS is a style sheet language that describes the presentation of a document written which is written in HTML. The CSS3 technology helps in the development of more visually engaging web pages and applications that can run on modern browsers. So, do you want to learn more about HTML5 and CSS3? Let’s dive in and find out more about these technologies.

2

HTML PAGE BASICS Any HTML document that you’ll create must begin with some text. It can be a new text—that you enter when creating the new document—or, it can be an existing test—for which you are converting to HTML format. The basic HTML document has the following structure:

Here is what you need to know about the significance of each of the above structure: • The DOCTYPE declaration shows that the document type we are creating is an HTML document. This declaration will help your web page to be displayed correctly by the web browser. 3

• Your content that you wish to display in a web browser is inserted between the and . • The content that is inserted between and gives information about the web page. This content is not displayed in a web browser. • The content that is inserted between and indicates the title of the page. • The text that is inserted between the and is what will be shown in a web page. • The text that is inserted between and indicates a heading The main function of HTML transforms a simple document that can be viewed in a web browser. This is achieved by the use of tags. The HTML tags indicate to the browser where to begin and end the special formatting. In other words, the tags are used to provide “mark ups” on the web browser. HTML tags are bracketed commands that uses the “less than” and “greater than” signs (< and >). For instance the tag to begin a paragraph is

. To show or markup the end of paragraph formatting, the same tag is used with a slash (/)after the first bracket. The end of the paragraph will be

. The start tag is often referred to as the opening tag while the end tag is referred to as the closing tag.

4

So, how do you write HTML pages? Well, HTML pages can be created and edited using an editor. Example of Editors that you can use includes: • • • •

Notepad (For Windows OS) Text Edit (For Mac OS) Microsoft WebMatrix Sublime Text

Notepad (For Windows OS) and Text Edit (For Mac OS) are the most commonly used Editors for creating and editing HTML contents for learning purposes. To use Notepad of Text Edit, here are the steps that you need to follow: • • • •

Open your Notepad or Text Edit application. Write your HTML content in the Notepad or Text Edit. Save the HTML page using the .html file extension. View the HTML page in your browser.

Text Basics Now that you’ve learnt the basic structure of all HTML documents, it’s now time to dig in and find out more about HTML tags. The main function of HTML tags is to indicate to the browser where to begin and end the special formatting. In other words, the tags are used to provide “mark ups” on the web browser.

5

What is written between the starting and ending tag is called HTML element. For instance, the code:

This is a paragraph.

has “This is a paragraph” as an HTML element. Sometimes HTML elements can be nested. Nested HTML elements are elements that contain other elements. It is important to note that all the HTML documents always contain nested HTML elements. For instance the HTML code below contains nested HTML Element:

The table below shows the most commonly used tags and their functions: Tag

Description Describes a comment Describes the document type Describes a hyperlink Describes an abbreviation or an acronym Describes the contact information for the author when used in an HTML document 6

Describes the area inside the image-map It provides a description of the article when used in HTML page It provides a description of the content from the page when used for the content in HTML page

Describes the sound content

Describes a bold text

It overrides the current text direction Describes a section which is quoted from another source

Describes the document's body
Describes the single line break

Describes a clickable button

It is used to draw graphics, on the fly, via scripting (usually JavaScript)

It describes a framework for the table caption

Describes the title of a a given work

Describes a piece of the computer code

Describes a section in a document

Describes a description list

Describes a term/name in a description list

Describes emphasized text

Describes a container for an external (non-HTML) application

It describes the groups for the related elements in a form

Describes a caption for a element

Specifies self-contained content

Describes the footer for a document or section

Describes an HTML form for user input to Describes HTML headings

Describes information about the document

Describes a header for a document or section

Describes a thematic change in the content

Describes the root of an HTML document

Describes the part of a text using an alternate voice

Describes an inline frame

Describes an image

Describes an input control

Describes a text that has been inserted into a document

Describes keyboard input

Describes a key-pair generator field (for forms)

Describes a label for an element

Describes a caption for the element

Describes a list item

Describes the relationship between a document and an external resource

7

Text Formatting

All HTML text elements have a default style. This can range from a text color, to text size or font. Changing the HTML element from a default style to a style of your choice can be done using two methods. These methods are: • Using HTML text formatting • Using the style attribute

Using HTML text formatting

There are special elements for formatting the text in HTML. These can be achieved by the following: • • • • • • • • • •

Bold text Important text Italic text Emphasized text Marked text Small text Deleted text Inserted text Subscripts Superscripts

For instance, the HTML element is used to define an italic text. The example below illustrates the use of Style attribute with font-size property:

8

Using the Style Attribute

The HTML style attribute has the following syntax:

In this case, the property is a CSS property while the value is a CSS value. The color property describes the text color that is to be used for an HTML element: The example below illustrates the use of Style attribute with color property:

The font-family property describes the font that is to be used for an HTML element: The example below illustrates the use of Style attribute with fontfamily property:

The font-size property describes the text-size that is to be used for an HTML element: The example below illustrates the use of Style attribute with font-size property:

9

The text-align property describes the horizontal text alignment that is used for an HTML element: The example below illustrates the use of Style attribute with font-size property:

Lists

HTML lists can be grouped into 3 categories. These are: •

•

•

Unordered lists. These lists are used to group a set of related items in unordered format. Ordered lists. These lists are used to group a set of related items using a specific order. Description lists. These are lists that describe the items in a web page.

All the unordered lists in HTML start with the

tag. The example below illustrates how unordered lists can be defined in HTML:

10

The ordered lists can be specified by using a type attribute that is added to the tag. The type attribute can assume either “A”, “a” and “1” for Upper case listing, small case listing, numbers listing respectively. The example below illustrates how ordered lists can be defined in HTML:

The description lists can be specified by the tag tag and the tag which describes the term and the tag which describes each term. The example below illustrates how description lists can be defined in HTML:

Image Preparation

You’ve written HTML content and your website looks more convincing to the user. However, you’d like to add some images to make it more appealing. How do you proceed? Well, before you can insert any image in your HTML, you must first prepare that image. 11

Here is how you can prepare an image to be inserted in a web page: •

•

•

Copy the image that you’d like to use in your website to the same directory as the HTML file that you’ve created. Make sure the file format for that image is consistent with the browser that will open that web page. Use the tag to insert the image in your HTML page.

Inserting Images

The tag is used to insert images in a HTML page. The tag has the following attributes: •

•

• • • •

It is a text that describes an alternate text for the image that has been inserted in a web page. Use-credentials. It allows images from third-party web-sites that can cross-origin access levels to be used with the canvas. It describes the height of the image It describes the image as a server side image-map It is the URL of the image It describes the width of the image

The example below illustrates how an image can be defined in HTML:

12

Website Project

Create a professional website for an Online Classmate System. This website should have the following components: • • • • • • •

The title A portfolio for each user Links with the rollovers Should provide an aesthetic choices for the user A clear focal point Creativity Appropriateness for the purpose

Your site should have a minimum of 6 HTML pages.

13

CSS BASICS Up to this point, we have learnt how HTML can help us create websites. Both HTML and CSS are essential in helping us to create websites. While HTML defines the structure of the web page, CSS defines the layout of the web page to be viewed on a variety of devices. CSS helps to separate the content from presentation when creating web pages. This has the following advantages that include: •

•

•

It helps to keep the style in for a limited number of style sheets. This promotes the process of editing a portion or a section of a website. It helps to save on the bandwidth for the site owner as well as the visitor’s website since it improves the performance of the website. It makes it easier for the site owners to reuse their content that they have developed for other purposes. This content can be re-used as RSS feeds or text to speech conversion systems.

Now that you’ve understood the significance of CSS in HTML, it’s time to dive in and learn more about how to use CSS.

14

The CSS syntax set consists of a selector and a declaration block. The CSS declaration must always end in a semi-colon. For instance, all the

elements in the example below will be center-aligned and a red text color.

The main function of a CSS selector is to enable you to select and manipulate the HTML elements in your web page. For instance, in the above example, all

elements will be aligned at the center with a red text color. The selectors can be grouped to minimize the code. The example below illustrates how the selectors can be grouped.

15

CSS Font Styles

The CSS font properties are used to describe the font family, the boldness of the text, the size, and the style of a text. The text font is set with the font-family property. When using the font-family property, several font names can be used as a contingency measure such that when the browser cannot support the first font, then it tries the next font. The example below illustrates how the font-family property can be defined in HTML.

The font-style property is used to specify an italicized text in CSS where the property can assume normal, italic or oblique. The example Below illustrates how the font-style property can be defined in HTML:

16

The font-size property is used to set the size of the text. The fontsize value is either absolute or relative. In the absolute case, the font-size is set to fixed specified size while in the relative case; the font-size is set relative to other elements in HTML. The example below illustrates how the font-size property can be defined in HTML using absolute and relative methods.

Colors

In HTML, the colors are defined using the RGB system (combination of Red, Green and Blue colors). The color values for expressed in Hexadecimal numbering notation. The Hexadecimal values are written inform of 3 double digit numbers that starts with the # sign. For instance the Hexadecimal value “#000000” represents black color while the Hexadecimal value “#FFFFFF” denotes white color. Based on the RGB color combinations, 16 million colors can be generated. The Hexadecimal color is specified with the Hexadecimal value: #RRGGBB, where the RR denotes the red color, GG denotes the Green color and BB denotes the blue color.

17

The example below illustrates how the font-size property can be defined in HTML:

The background color can be set for different elements in a HTML page. For instance the example below illustrates how the background color for the entire page can be set, with the elements and

having different settings:

18

Link Styles

The CSS hyperlinks can be styled using property of CSS that include the color, the font-family and the background. The example below illustrates how the color property of CSS can be used to style a hyperlink:

The text-decoration property of CSS is used to eliminate the underlines from the hyperlinks as illustrated in the example below:

19

The background-color property of CSS is used to indicate the background color for the hyperlinks. The example below illustrates how the background-color property can be used with hyperlinks:

Website Project

Create a web site using the knowledge you have learnt in CSS. Your web site should contain least five, but no more than eight content pages including the home page. Use a style sheet that configures the text, the color, and page layout for your website. Your website should capture the following: • • • • • • •

The title A portfolio for each user Links with the rollovers Should provide an aesthetic choices for the user A clear focal point Creativity Appropriateness for the purpose

20

LINK BASICS Are you ready to learn how to develop professional websites? Fantastic! There’s a lot that you need to learn about HTML links, so let’s dive in. HTML pages are hypertext pages that contain hyperlinks—that enable people to navigate between different contents on the World Wide Web. The fundamental idea in developing any website— which is at the heart of any website development—is to allow users to refer to other pages on the World Wide Web. The underlying TCP/IP application layer protocol that helps in the transfer of hypertext pages across the WWW is called Hypertext Transfer Protocol (HTTP). For instance, when you type a URL in a web browser such as www.stoneriverelearning.com and click the enter key from your keyboard, the HTTP protocol directs the Web Server to fetch and transmit the requested page—which in this case is the Stone River eLearning home page. The requested page must be hypertext— with the links that allows you to navigate between different contents on the Stone River eLearning website such as Course Bundles and Course Demos. Knowing how to insert these hyperlinks in your HTML page is essential in helping you understand how the World Wide Web works. Before we dive in and begin to learn the basics of HTML links, here are a couple of tips that you should bear in mind when generating links during the process of developing a good website.

21

•

•

•

•

It should have leveraged links. By leveraged links, we imply that the words you choose for a link should not only be part of a key word, but also descriptive enough to make the user understand what the link is all about. The hyperlinks should be functional. Broken links will leave your customers exasperated lot. Try as much as possible to make your links functional so as not to disappoint your clients. But this should not only apply to hyperlinks alone. Every aspect of your website should be well-designed to make your site usable. There should be impeccable choice and use of color. When choosing the color for your links—whether “visited”, or “active” or “hover”—make sure you select an appropriate color scheme. The text you select for the hyperlinks should be easy to read. Use fonts that are not only appealing, but also available on most operating systems.

How to insert links HTML links are defined by the tag. This stands for an anchor—which is a text that marks the beginning and the end of a hypertext link. More often than not, the text between the opening tag and the closing tag can either be the start or the destination or even both of the hyperlinks. The attributes of the anchor tag include the following: •

Href - It specifies the location (URL) of the web page to be opened. For instance the example below shows how an HTML 22

page named: “Index.html” that is located in the same folder as the current page can be linked.

Note that the user will click on the text: “Click Here to View the Index Page” on the web browser so that the page: “Index.html” can be opened. •

Hreflang - It specifies the language of the linked resource in HTML. In other words, this attribute informs the search engine the language that you are using on that specific page— to help the search engine generate the results to other users that are searching in that language. You should note that this attribute can only be used when the href attribute has already been defined.

For instance, the example below illustrates how the Hreflang attribute can be used to help the search engine generate results in English language.

•

Media - It specifies the media for which the linked resource relates to. The value of the media attribute should always be a media query. More often than not, this attribute mainly applies when linking to external style sheets which allow the user agent to select the best adapted device on which the page will run on.

The example below illustrates how the media attribute can be used to specify target URLS that are designed for desktop web browsers:

23

•

Ping - It specifies the URLs of the resources that notify the user to follow the hyperlink on a web page. This is exemplified below

In this case, when a user clicks on the link the URL which has been specified in the ping attribute http://www.stoneriverelearning.com will be sent. •

•

Target. It indicates the location where the linked resource is to be displayed. The value of the target attribute can assume either “_blank”, “_top”,”_parent”, or”_self”. This is demonstrated by the example below:

Type - It indicates the media type—usually in the form of a MIME type–for the link target. There are some instances, when the browser might want to add a small speaker icon, especially, when type is set to audio or a wav file format.

Congratulations! You’ve finished your first chapter about HTML link basics, but there’s still a lots for you to learn about HTML links. So keep up and good luck!

24

IN-PAGE LINKS How to Use In-Page Links in a Web Site

In this chapter, we’ll wrap the discussion on how you can use the In-page links in your website. By the end of the chapter, you’ll not only learn the significance of the In-page links in website development, but also how to create these links in your website that promotes the interactivity of your website. To start off, let’s define what the In-page links are. Well, the Inpage links are hyperlinks on your web page that enables users to link to other pages on the same page. These links can be regarded as links within a page. If you’re developing a website, then your main objective is to make sure that your visitors can browse as many pages as possible. That’s why your website may have so many web pages. Associating these pages requires that you use the In-page links. This is all about connecting several pages within a given web page—that’s why it’s called In-page link, after all. Why are these links important for a website developer? Well, the In-page links are important to a web developer because of a number of reasons. These reasons include: •

They permit users to navigate numerous web pages on a website. If your website has numerous web pages, then the only mechanism that can allow users to navigate these pages are the In-page links. 25

•

•

They help to establish the information hierarchy for a given website. The In-page links can help you organize your website according to categories. This gives your website a good structure that is easy to navigate. They may help you to market your website by increasing your presence on the internet. Most search engines rely on the Inpage links when displaying the results for a particular query.

Types of In-Page Links

There are different types of In-page links in HTML. These are: •

•

•

•

Local links – They are used to link to pages that exist the same server or the folder/directory as the current page. External links – They are used to link to a page that exists on a different server or folder/directory E-mail links – They are used to open the visitor’s e-mail program Download links – They allow users to download files on your website.

So, How Can You Use The In-Page Links In A Web Page? Inserting an In-page link depends on whether that link is local or external or email or download. Before you can insert an in-page link in your web page, you have to establish whether the page you’d like to link to be in the same directory/folder or it’s located in a different folder/directory or it’s an email or a download link that you’d like to establish. Once you’ve established the type of link you’re dealing with, you can proceed to insert that page link.

26

Here is the syntax for inserting different types of the in-page links in an HTML document: 1. To insert a local link Use the syntax below to insert a page that exist the same server or the folder/directory as the current page.

For instance the example below shows how an HTML page named: “Index.html” that is located in the same folder as the current page can be linked.

2. To insert an External Link Use the syntax below to insert a page that exist the same server or the folder/directory as the current page. In this case, you must specify the complete path to the location of the web page. For instance the example below shows how an HTML page named: “Index.html” that is located on Local Disk C.

If the page exists on a different server, then use the following syntax:

27

For instance the example below shows how an HTML page named: “Index.html” that is located at www.stoneriverelearning.com. 3. To insert an Email Link This link is used to receive feedback comments from your website visitors. To insert an email link in your page, use the syntax below:

This is illustrated below: 4. To Insert a Download Link To insert a download link in your HTML page, use the following syntax:

This is exemplified below:

So there you have it—we’ve covered the most important concepts about the In-page links in HTML. Now, start the development of your website by using the concepts you’ve learned in this lesson.

28

LINK STYLES How to Use Link Styles in HTML Pages In this chapter, we are going to learn about link styles. Now, you might be thinking, “This sounds fantastic, but why are link styles important for your web page?” Well, your readers would be probably be scanning and not reading your website. Some of the readers simply don’t have the time to read the content on your web page. So, with the little time they’ve got, you must make your web page as readable as possible. You achieve this by making sure that your links are obvious for the reader to scan through—with the little time they’ve got at their disposal. This is why you should indicate to them on your website where they have visited and the web pages they haven’t visited. That’s where the link styles perfectly fit in. Well, you now understand why it’s important to have link styles on your web page. So, let’s dive in and find out how you can use link styles in your web page.

29

How to use the Link styles in your Web page

You will apply the HTML Links in your web page by using the any of the CSS property that you’ve learnt so far. This includes the color, the font-family and the background. For instance, the HTML code below assigns the color “Blue-#0000FF”to all the links in your web page.

Of utmost importance while designing your web page is indicating to your visitors those links they’ve visited and the links they haven’t. You can achieve this by using the link states. They are four link states, namely: • An A: link which is a normal link that has not been visited before. • An A: visited link, which is a link that the user has visited before. • An A: hover which is a link indication for the user when the user’s mouse passes over while browsing. • An A: active which is a link indication the moment it is clicked by the user.

30

Here’s how you can use the CSS to style your link states:

In some instances, you may use the text-decoration property of the CSS, which removes underlines from the links on your web page. For instance the HTML code below shows how you can underline all the active links in your web page:

The background-color property of CSS is used to specify the background color for your links. For instance, the HTML code below shows how the background color for a normal link can be set to color “red-#FF0000”.

So, there you have it. Everything that you need to know about the HTML Link styles. In our next discussion, we will discuss how to use the navigation menus in HTML web pages. 31

NAVIGATION MENUS A Definitive Guide to Using the Navigation Menus in HTML Pages In this lesson, we look at how you can use the navigation menus to help you create a usable website. A good website is that website that is usable. One way of making this a reality, is by using the navigation menus. Having an easy-to-use navigation can help the visitors locate any information they’d like to read in a stress-free manner. Having said that, it is important to learn how to organize your navigation menus; to help your visitors browse your site in a stressfree manner. CSS can help you transform any lackluster HTML menus into stunning navigation menus that will make your website usable. Well, at the core of CSS navigation menus; the navigation menus can be viewed as a series of lists. So, the lists will form our background discussion on how we can use the navigation menus in HTML pages. There are two approaches that you can use: • CSS list styles • CSS with NAV tags So, let us find out how we can create navigation menus in HTML pages.

32

CSS List Styles and Navigation Menus Lists in HTML are specified by the unordered list (UL) and the ordered list (LI) tags. We can use these tags to specify how we would like our menus to appear on a web page. For instance, the example below illustrates how we can create a “Home Page”, “About Us”, “Contact Us” links in a web page:

We can modify the above list by removing the bullets since we’ve used the ordered list to specify the “Home Page”, “About Us”, “Contact Us” links on the web page (We learned that by default, the ordered lists use bullets). So, how can achieve this? Good question. We go back the CSS basics on how lists can be styled. The liststyle-type property of CSS lists comes in handy. We will use this property to remove all the bullets in the list—since navigation menus should not have bullets. Here’s how you can remove the bullets:

33

We can also style the elements, by placing a vertical navigation bar as follows:

In the above example, the display: block is used to display the links as block elements so that the whole link area becomes clickable with your mouse. The width: 60px in indicates the width of the block. Having used CSS lists with your navigation menus, your HTML code should look like one below:

34

To use the Horizontal navigation bar, you can use the inline or floating list items of the display property for lists. For instance, the HTML code shows how you can insert a horizontal navigation bar in your navigation menus:

Or alternatively, you can use the tag to create your navigation links, especially if you’d like to have a major block for your navigation links. For instance we could specify the navigation links using the HTML code below, where the tags have replaced the

tag to define the data that’s inserted in the cells. Have a look at the following HTML code:

The above HTML code produces table with 2 rows and 3 columns. Note that the table produced by the above code lacks the borders, title and other important information that tables should have.

49

Other attributes of the in include the following: •

•

•

•

•

•

•

•

Sortable. It defines whether a given table can be sorted or not. This attribute is supported in HTML 5. Align. It defines the alignment of a table. However, this attribute is not supported in HTML5. Bgcolor. It defines the background color of a table. It is not supported in HTML5. Border. It defines the borders of a table. It is not supported in HTML5. Cell padding. It’s measured in pixels and indicates the space that exists between the cell wall in a table and the cell content. It is not supported in HTML5. Cell spacing. It’s the spacing between the cells in a table. It is not supported in HTML5. Width. It defines the width of a table. It is not supported in HTML5. Caption. It defines the title of the table.

There are sometimes when you’d like to specify the number of rows or columns that a particular cell should span. In such a case, you’ll have to use the

tag attributes such as: •

•

Colspan. The Colspan attribute specifies the number of columns that a given column should extend. Rowspan. It defines the number of rows that a given row should extend.

50

The HTML code below shows how the two attributes of the

can be used:

Well, there you have it. Keep practicing. You’re on your way to becoming a professional web developer! In our next class, we’ll learn how to use CSS with tables.

51

TABLE STYLES A Definitive Guide to Using HTML TABLE STYLES In this chapter, we continue our discussion on tables by looking at how you can use styles on your tables. Specifically, we’ll learn how to use CSS with our tables. You are now asking yourself this question: “why must we use CSS to format the table?” Well, that’s a good question. The fundamental concepts upon which CSS was invented to solve remain the same. If you are a web developer, then you should have more control over any page layout and display that you are creating. Having more control means separating the content of your web page from the style. The same principle applies to HTML tables. As a web developer, you shouldn’t focus much of your energy on the layouts and styles for your tables. CSS can handle that. Once you separate the content that’s placed on the table with the layouts and style used, you’ll have more leverage to your web page. Having said that, it’s important to refresh our minds again on how tables are generated in HTML. This is because we will use the same concepts, but this time round, we will focus on the layout and not the content. Do you remember some of the attributes of the tables that we discussed which were not supported in HTML5? Well, attributes such as “align”,”border”,”width”,cellspacing” and ”cellpading” have been taken up by CSS. 52

In this lesson, we will look at how we can format our tables with some of the attributes that I have mentioned above. So, let’s not dip so much and dive in to find out how to use an HTML table styles.

HTML Table Borders

The borders of a table can be specified by the “border” attribute of a table. In CSS, it’s possible to specify the borders for ,

and

. For instance, the example below shows how a border of “2px” can be set for ,

and

tags. The border-collapse attribute of a table specifies the table borders when they are joined into a single border. For instance, the HTML code below illustrates this:

Width and Height of the Table

The width and height of a table are specified in pixels or percentages. They are defined by the “width” and “height” properties respectively in CSS. For instance, in the example below, a width of 60 pixels and height of 40 pixels has been specified:

53

Cell Padding

It indicates the space that exists between the cell wall in a table and the cell content. Here’s how it can be specified in CSS:

Table’s Color

Here’s how the table’s background color can be set using CSS:

So there you have it—the basics of HTML table styles. Now, you can use this knowledge to get you started on working with tables.

54

FORM BASICS An Introduction to Html Form Basics Let’s start out with a bigger picture in this chapter. Why do we need forms in HTML? The arrival of new standards in technology which have led to the growth of the internet has dramatically changed the way we use our websites. It’s no longer the case that you’ll just use your website for sharing information that you have with your end users. For you to get the most out of your website, you must consider user experiences. That means, you must have a mechanism to collect user input experiences. It’s the only way that you can connect with your website visitors. That’s where the HTML forms come in. An HTML form can act as a communication channel between your company and your visitors and vice versa. Therefore, for you to make a successful website, you must include the forms on such a website to help you collect information from your clients or visitors. Having said that, let’s dive in and learn how we can construct HTML forms.

55

The element is used to define an HTML form in a web page. There are two basic attributes for element. These are: •

•

Action. It specifies where the data that has been collected is sent when the submit button is clicked. Method. The method indicates how the data that has been collected on the form is sent. There are two types of methods. The “GET” value attaches the form data input to the URL when the submit button has been clicked. The “POST” value of the method property is used to send the form data input as an HTTP transaction which is more secure.

Here’s an example:

So, what’s placed between the and tags? Different types of input data elements such as text boxes, checkboxes, radio buttons, submit buttons, drop down boxes are placed between the and tags to help you collect data from your website visitors.

The Element

It has many variations that are applied depending on the type of data that you’d like to collect. Here are examples of how you can use the element: The is used to define a one line input field for collecting a text input from a user.

56

The is used to specify the radio button— where a user has the option of selecting one out of many alternative options. The is used to specify a button that users will click on so that their form data can be sent to the server. The example below shows how the three elements can be used:

This marks the end of part one of our discussion on forms. Keep practicing so that you improve your skills in forms creation.

57

HTML FORM ELEMENTS How to Use HTML Form Elements We started this discussion by defining what HTML forms are and their main functions in web development process. We saw how the element is used to define HTML form in a web page with the 2 attributes namely the “action” and the “method”. We also saw how you could create a basic form for collecting data where we used a text box, a radio button and a submit button. In this chapter, we continue the discussion by focusing on more the form elements. Here are the form elements that you’ll frequently use when working with forms: The Element It has many variations that are applied depending on the type of data that you’d like to collect. Here are examples of how you can use the element: The is used to define a one line input field for collecting a text input from a user. The is used to specify the radio button— where a user has the option of selecting one out of many alternative options. The is used to specify a button that users will click on so that their form data can be sent to the server. The is used to specify a file to be uploaded to a server.

58

The example below shows how the three elements can be used:

The Element

It is used to define a drop down list. Here’s an example that shows a drop down list for months:

59

The Element

It is used to define a text area—where multiple lines of text can be entered in a form by users. Here’s an example:

This marks the end of part one of our discussion on forms. Keep practicing so that you improve your skills in forms creation.

The Element

It’s used to define a button that can be clicked. Here’s an example:

The Element

It’s used to define a list of pre-defined options when you use the element. When you use this element, your users will see a drop down menu for the pre-defined options that you have specified by the element. Here’s an example of how to use this element:

60

HTML5 FORM ELEMENTS How to Use HTML5 Form Elements We started this discussion by defining what HTML forms are and their main functions in web development process. We discussed the most common form elements. In this discussion, we look at new HTML 5 elements and attributes. HTML 5 has introduced new elements together with new attributes. These new elements are meant to give hints to your browser about what type of the keyboard layouts to display for the on-screen keyboards. This is all meant to give you an impeccable experience while filling out the forms. It’s important to note that web browser support for HTML5 elements will vary from one browser to another. In case the browser does not support HTML5, then it defaults to HTML4— which is supported by virtually all browsers. So, let’s find out what’s new in HTML5 form elements.

New Input Types of Forms in HTML 5 Here are the new input types of forms in HTML 5 1. Color The color input type is used to provide the user with a native color picker. For instance the HTML code below illustrates this:

61

2. Date It’s used to indicate the date picker. This provides users with mechanisms to easily select the date. For instance the HTML code below illustrates this:

3. Datetime It’s an element that’s used to select both the date and the time for a particular day. The HTML code below illustrates this:

4. Datetime-local This HTML element is used to select both the date and the time, which captures the local settings for your system. The HTML code below illustrates this:

5. Email It provides a field for entering the e-mail address. For instance, the code below illustrates this:

6. Month It’s used to elect a full month. For instance, the code below illustrates how a full month can be selected by this HTML element:

62

7. Number It’s used for selecting numbers only. For instance, the HTML code below shows how you can define a field for picking numbers only:

New Attributes for Forms in HTML 5

Here’s a list of new attributes that have been added to HTML5 to complement the new input types: 1. autofocus It’s used to set to the field when the element has been loaded. For instance, the code below sets an autofocus for the text field:

2. formaction This new attribute overrides the JavaScript’s validation in HTML 4 and previous versions of HTML. It’s used to override the action attribute of the form. For instance, the code below illustrates this:

3. formenctype It specifies the form’s encoding type when submitting data. For instance, the HTML code below illustrates this:

63

4. formmethod It’s used to override the form’s method attribute. For instance, the code below illustrates this:

5. max It specifies the maximum value for the number that has been entered in a text field. The code below illustrates this:

6. min It specifies the maximum value for the number that has been entered in a text field. The code below illustrates this:

Well, that’s all that we can discuss about HTML 5 form elements. Try to experiment with these new HTML5 form elements and notice the difference between HTML4 and HTML5 form elements.

64

FORM STYLES How to Design HTML Forms with CSS So far, we’ve discussed how we can create forms in HTML using the element along with its attributes and how to use them. We’ve also looked at different form elements such as text fields and text area; multiple choice input menus such as radio and checkboxes, drop down list menus and form button such as submit and reset buttons. It’s now time to wrap up this discussion by focusing on how to layout the form. When designing a form, it’s essential that the layout of your form is enhanced. This is because bad form layouts have the tendency to confound your visitors therefore driving them away from your website. It’s a fact that shouldn’t be belabored a lot when designing HTML forms. So, in this chapter, we’ll explore how you can augment your website by focusing on CSS styles. The main aim of using CSS to style up your forms to separate the content—what the forms will capture—and the layout. This provides you with the flexibility and the control you need when creating the HTML forms. Having said that, let’s dive in and learn how you can create layouts for your HTML forms.

65

Grouping different fields using the Element

In our last discussion, we saw how you can create a form together with different form elements such as text fields and text area; multiple choice input menus such as radio and checkboxes, drop down list menus and form button such as submit and reset buttons. However, when you view the output of your work in a web browser, we realized that the different fields were disorganized. Well, that should no longer be the case with the tag. This tag has been included to help you group the related form elements together. For instance, the HTML code below shows how you can use this tag:

In the above example, the tag has been used to provide the caption (Personal Information) for our element. 66

How about using CSS with the tag?

Let’s dig deeper and elaborate more about this tag. The purpose of this tag to help you group related elements such as personal information (As illustrated in the above example). On a more positive note, we can provide different formatting features for each group of items that have been defined by the tag. For instance, we can now define how we would like the grouped HTML elements to be appearing by using the following code in CSS:

The display property “block” helps the grouped elements to be displayed as a block. The margin property helps us to set the left, top, right and bottom of the block. The padding property helps us to set the top, bottom, left and right padding space for our blocks.

67

Other CSS styles for the different form elements

So far, we’ve looked at how the property can help us to format our grouped items. However, how can we make the individual form elements look better? This is the trickiest part when creating form layouts. For us to format the individual form elements, we must specify the tag for each form element that we would like to format. The tag is used to define the label for the element, such as a text field or a text area. It has the following attributes: •

•

Id. The ’s “id” property is used to define an identifier for the associated element of the label. Class. The ’s “class” property is used to define the class for the associated element of the label.

Having said that, let’s see how we can create a form that uses not only the property, for grouping related form elements, but also the tag to help in formatting of individual form elements.

68

We can now specify our form as follows:

Now, having defined the label for each form element (In the above example, we’ve defined labels for “Full Name”, “Email Address” and “Date of Birth”), let’s go ahead and define the layout formats for these form elements.

69

Here’s is how we will define the CSS for our created labels:

Applying the above CSS features distinguishes your forms by making them usable—a feature that will drive visitors to your website. This marks the end of form styles.

70

STREAMING CONTENT How to Set up Streaming Video Content in HTML5 Now that you’ve learnt all the basic components of HTML5, It’s time to wrap up this discussion by looking at how you can set up streaming video content. You’ll also learn how to add a streaming video in a web page. First and foremost, it’s important to understand how video content streaming works. Whenever, you’re watching for a video from a web browser, the information comes in smaller chunks. So, when you’re watching these smaller chunks of video, what’s actually happening is that video being displayed has been encoded using multiple bitrates and resolutions that creates the smaller chunks of multiple sizes that you’re watching on your web browser. This is how your browser is able to display these chunks of information that you watch on your web browser. It’s also important to define the video standards that are accepted in HTML 5. Modern browsers and even mobile browsers support can play videos directly. Note that the video file formats supported in HTML5 are .mp4, .ogv, and .webm. So, if you are considering streaming video content on a web browser, then the only file formats that are supported are .mp4, .ogv, and .webm. But this doesn’t mean you can’t embed your video into any web browser. You can still convert that video content that you’d like to stream into either of the file formats using “video converter” applications that can easily be downloaded from the internet. If

71

you want to convert your videos, just search these apps on a search engine. The search engine will display quite a number of them. Download and install the app so that you can convert any video into a file format of your choice.

Preparation of the Video Content

So, how do you prepare a video content to be streamed to a browser? Here’s is what you should do before adding any video content on your HTML page: •

•

•

•

Convert the video that you would like to add to a web page into a file format that’s easily recognized on most devices and browsers. The most common video file formats that are supported include: the .mp4, the .ogv, and the .webm. If you’re developing your website for people who may have the non-Flash browsers, then it’s important to help the browsers to automatically switch to HTML5 fallback mode when a non-Flash browser is encountered while browsing. You can use a couple of applications that can help you achieve this functionality. One such application is JW Player. Download and install the application. Follow the instructions of the application to help you configure browsers that are likely to switch automatically to HTML5 fallback mode.

Adding the Video Streaming Content to HTML Page

Well, now that you’ve prepared the video that you’d like to add to a webpage, it’s now time to add that video content on an HTML page. Addition of video to a webpage is done by the 72

element. The basic element has a couple of attributes that specify other characteristics of video that’s to be streamed to a web browser. One such attribute is the “src” attribute that specifies the URL where the video to be streamed to a web browser is located. For instance, the HTML code below illustrates how a video that’s located on C: can be streamed on a webpage:

Other attributes of the element include: •

•

•

•

•

•

•

Autoplay. The Autoplay attribute is used to notify the browser to begin downloading the video and playing it the moment the webpage is loaded. Preload. It’s used to notify the browser about whether the optimistic downloading of the video the video’s metadata is important. Poster. It’s used to notify the image to be displayed before the video loads on a web browser. Controls. They display the default video controls such as play and pause. Height. It defines the height of the video in pixels when displayed on a web browser. Width. It defines the width of the video in pixels when displayed on a web browser. Loop. It automatically loops the video, when the video has finished playing. 73