for Beginners COPYRIGHT NATIONAL SEMINARS TRAINING. ALL RIGHTS RESERVED.

Transcription

1 HTML for Beginners COPYRIGHT NATIONAL SEMINARS TRAINING. ALL RIGHTS RESERVED.

2 HTML FOR BEGINNERS History of HTML The Hypertext Markup Language (HTML) was created in the early 1990s as a text description language. The language itself had its beginnings in the 1980s, but was implemented with application solutions that allowed for the serving and viewing of HTML in the early 1990s. Tim Berners-Lee was the creator of the original HTML language. WARNING: Web browsers often lag behind new HTML developments by one to three years. Be cautious when using the latest and greatest features on Internet Websites. 2

3 PARTICIPANT NOTEBOOK Use HTML to Improve Business Communication and Application HTML is used for many purposes today, with the enhancements made available in HTML 5. These uses include: Internet Web pages Mobile applications ios (Apple) Android Windows Mobile/8 Symbian webos BlackBerry e-books Intranet applications 3

4 HTML FOR BEGINNERS Create Dynamic HTML Documents You want to ensure that the HTML documents you create are properly structured. Certain elements should be there in any document. In this topic, you learn to do it right the first time when creating HTML documents. 4

5 PARTICIPANT NOTEBOOK Search Engines and Indexing Applications: Design the Structure That Will Yield Great Results Focus on Search Engines Search engines and other indexing agents expect certain elements to exist in your HTML documents. Having the right document structure and elements goes a long way toward pleasing these search engines. This topic provides an overview of these elements. Meta Tags The following tips are for the meta tags in relation to search engines: Use a DESCRIPTION tag. Use a TITLE tag. Don t use the KEYWORDS tag. Content The following tips will help you create content that is search engine friendly: Enter text as text and not as images. When using images, always use ALT text for the search engines. Create natural content and fine-tune it carefully. Do not spam the search engines. An example of search engine spam would be text like the following (targeting the keyword of HTML): HTML is the HyperText Markup Language (HTML) and HTML is used to create HTML Web pages based on HTML. You use HTML tags when writing HTML documents. My five favorite words are HTML, HTML, HTML, HTML, and HTML. When I m not thinking about HTML, I m writing about HTML or speaking about HTML. If you can t tell yet, this site is about HTML, HTML, HTML, HTML, HTML, HTML, and more HTML. Some attempt to spam search engines by listing keywords in the page using text colors that are the same as the background color. This is detected by most modern search engines and reduces your ranking for those keywords. 5

6 HTML FOR BEGINNERS Emphasize Important Portions of Your Documents Use Fonts and Colors for Textual Impact You do not have to accept boring text in your HTML documents. You can define fonts and colors directly or through a solution known as Cascading Style Sheets (CSS). This topic introduces the use of these HTML elements. Two methods are available for controlling fonts and colors: traditional tags and Cascading Style Sheets (CSS). The preferred method today is CSS; however, this topic gives examples of both. To set a font and color using direct HTML tags: <font color= #cc0000 face= Arial, Helvetica, sans-serif >Text Here</font> To set a font and color using CSS, first create a style, like this: p.arial { font-family: Arial,Helvetica,sans-serif; color: #333333; } p.timesnew { font-family: Times New Roman, Times, serif; color: #cc0000; } Then apply the style to text, like this: <p class= Arial >Text using the Arial font family here.</p> <p class= TimesNew >Text using the Times New Roman family here.</p> 6

7 PARTICIPANT NOTEBOOK Add Images to HTML Documents for Additional Impact A picture is worth a thousand words. This is true in your HTML documents as well. This topic introduces you to images and other media types that you can include in your HTML documents. Common Image Types Several common image types are used in HTML documents, including: GIF excellent for vector graphics JPEG excellent for raster graphics PNG good for either vector or raster graphics Other Media Types Additional media types can be used as well, including: Flash Video Animated graphics Sound Using the IMG Tag The IMG tag is used to insert an image and has a syntax like the following: <img src= image_name.gif alt= alternate text height= 42 width= 42 > The image_name.gif value should be changed to the appropriate file name and may require the storage path as well if the image is not in the same folder as the HTML document. The alt value should be changed to descript the image properly. The height and width values should be changed to match the image. 7

8 HTML FOR BEGINNERS New HTML 5 Features HTML 5 introduces many new features that allow it to function more as a full-featured application development platform. The following new features are important: The new HTML 5 DOCTYPE The CANVAS element The VIDEO and AUDIO elements Access to local storage Net content-specific elements ARTICLE FOOTER HEADER NAV SECTION The new minimum HTML 5 document is much simpler: 8

9 PARTICIPANT NOTEBOOK HTML Coding Tools Use Free Tools That Improve the HTML Writing Process Several free HTML coding tools are available, and commercial tools may be useful as well. This topic introduces you to several of these tools. Commercial Tools Commercial tools are available for purchase and include the following popular applications: Adobe Dreamweaver Microsoft Expression Studio NetObjects Fusion CoffeeCup HTML Editor Free Tools The following tools are available as freeware or open source: PageBreeze KompoZer Amaya SeaMonkey PSPad 9

10 HTML FOR BEGINNERS Plot a Plan for Your Continued Learning of the Powerful HTML Language Where do you go from here? You can continue learning about HTML using several resources: On-site training via Web-based learning or live in-person classes HTML5 & CSS3 Visual QuickStart Guide (7th Edition) by Elizabeth Castro HTML, XHTML, and CSS Bible (5th Edition) by Steven M. Schafer 10

11