is Introduction to HTML

Size: px

Start display at page:

Download "is Introduction to HTML"

Brook Horton
5 years ago
Views:

1 or tri N s di IO n tio AT uc od pr re U ed AL riz ho ut na EV U n is i ib d tie PY oh pr O C io t bu Introduction to HTML

2 (HTM101 version 4.1.0) Copyright Information Copyright 2017 Webucator. All rights reserved. The Authors Nat Dunn Nat Dunn founded Webucator in 2003 to combine his passion for web development with his business expertise and to help companies benefit from both. Stephen Withrow (Editor) Stephen has over 30 years' experience in training, development, and consulting in a variety of technology areas including Java, C, C++, XML, JavaScript, AJAX, Tomcat, JBoss, Oracle, and DB2. His background includes design and implementation of business solutions on client/server, Web, and enterprise platforms. Stephen is a published writer in both technical and non-technical endeavors. Stephen received an undergraduate degree in Computer Science and Physics from Florida State University.

3 Accompanying Class Files This manual comes with accompanying class files, which your instructor or sales representative will point out to you. Most code samples and exercise and solution files found in the manual can also be found in the class files at the locations indicated at the top of the code listings. Due to space limitations, the code listings sometimes have line wrapping, where no line wrapping occurs in the actual code sample. This is indicated in the manual using three greater than signs: >>> at the beginning of each wrapped line. In other cases, the space limitations are such that we have inserted a forced line break in the middle of a word. When this occurs, we append the following symbol at the end of the line before the actual break:»»

4 Table of Contents Table of Contents 1. A Quick Overview of Web Development...1 Client-side Programming...1 HTML...1 Cascading Style Sheets...1 JavaScript...1 Dynamic HTML...1 Ajax...1 Server-side Programming...2 ColdFusion...2 Java EE...2 ASP.NET...3 Python...3 PHP...3 Node.js Introduction to HTML...5 Getting Started...5 Exercise 1: A Simple HTML Document...6 The HTML Skeleton...11 The <head> Element...11 The <body> Element...11 Whitespace...11 HTML Elements...13 Attributes...13 Empty vs. Container Tags...14 Blocks and Inline Elements...14 Comments...15 Special Characters...15 The HTML Version...16 HTML lang Attribute Paragraphs, Headings, and Text...21 Paragraphs...21 Breaks and Horizontal Rules...25 Exercise 2: Creating an HTML Page...28 Quoted Text...32 Preformatted Text...33 Text Level Semantic Elements...35 HTML5 and the HTML 4 Formatting Elements...37 Documenting Changes...39 Version: Printed: i

5 Table of Contents 4. HTML Links...43 Text Links...43 Absolute vs. Relative Paths...44 Absolute Paths...44 Relative Paths...45 Default Pages...45 Targeting New Windows Links...46 Exercise 3: Adding Links...47 Anchors...52 Anchors with the name Attribute...52 Anchors with the id Attribute...54 name vs. id...54 The title Attribute HTML Images...57 Inserting Images...57 Making Images Accessible...58 Alternative Text...58 Long Descriptions...59 Height and Width Attributes...59 Image Links...60 Exercise 4: Adding Images to the Page HTML Lists...65 Unordered Lists...65 Nesting Unordered Lists...67 Ordered Lists...70 Nesting Ordered Lists...72 Start Attribute...75 Definition Lists...76 Exercise 5: Creating Lists HTML Tables...85 Creating Tables...85 Adding a Caption...86 Attributes...87 Merging Cells...90 Exercise 6: Creating Tables...92 ii Copyright 2017 Webucator. All rights reserved.

6 Table of Contents 8. HTML Forms...97 How HTML Forms Work...97 The <form> Tag...98 Get vs. Post...98 Form Elements id and Name Attributes Labels Text Fields Password Fields Submit and Reset Buttons Hidden Fields Exercise 7: Creating a Registration Form Checkboxes Radio Buttons Exercise 8: Adding Checkboxes and Radio Buttons Select Menus Textareas Exercise 9: Adding a Select Menu and a Textarea Version: Printed: iii

7 Table of Contents 9. Crash Course in CSS Benefits of Cascading Style Sheets CSS Rules CSS Comments Selectors Type Selectors Descendant Selectors Child Selectors Class Selectors ID Selectors Attribute Selectors The Universal Selector Grouping Precedence of Selectors Determining a Selector's Specificity The Cascade Embedded Style Sheets Exercise 10: Creating an Embedded Style Sheet External Style Sheets Exercise 11: Creating an External Style Sheet Inline Styles Exercise 12: Adding Inline Styles Media Types <div> and <span> Exercise 13: Divs and Spans Units of Measurement Pixels (px) Points (pt) Inches (in), Centimeters (cm), and Millimeters (mm) Picas (pc) Ems (em) Exs (ex) Rems (rem) The Inherit iv Copyright 2017 Webucator. All rights reserved.

8 A Quick Overview of Web Development 1. A Quick Overview of Web Development In this lesson, you will learn About client-side web development languages. 2. About server-side web development languages. Web development involves a combination of client-side programming and server-side programming. 1.1 Client-side Programming Client-side programming involves writing code that is interpreted by a browser such as Internet Explorer or Mozilla Firefox or by any other web client such as a cell phone. The most common languages and technologies used in client-side programming are HTML, JavaScript, and Cascading Style Sheets (CSS). HTML HyperText Markup Language (HTML) is the language behind most web pages. The language is made up of elements that describe the structure and format of the content on a web page. Cascading Style Sheets Cascading Style Sheets (CSS) are used in HTML pages to separate formatting and layout from content. Rules defining color, size, positioning, and other display aspects of elements are defined in the HTML page or in linked CSS pages. JavaScript 1 JavaScript is used to make HTML pages more dynamic and interactive. It can be used to validate forms, pop up new windows, and create dynamic effects such as drop-down menus and image rollovers. Dynamic HTML Dynamic HTML is not a language but rather refers to code that uses JavaScript to manipulate CSS properties on the fly. 1. The word "JavaScript" is a proprietary name for Netscape's version of ECMAScript. Microsoft's version of this language is called JScript. Version: Printed: Page 1 of 162

9 A Quick Overview of Web Development 1.2 Ajax The term Ajax was originally a pseudo-acronym for "Asynchronous JavaScript And XML" 2 but is now used much more broadly to cover all methods of communicating with a server using JavaScript. The main purpose of Ajax is to provide a simple and standard means for a web page to communicate with the server without a complete page refresh. Server-side Programming Server-side programming involves writing code that connects web pages with databases, XML pages, servers, file systems, and other systems and software accessible from the web server. The most common server-side languages and programming frameworks are ColdFusion, Java Enterprise Edition, ASP.NET, Python, PHP, and Node.js. ColdFusion ColdFusion, created by Allaire (now owned by Adobe), is arguably the simplest of all server-side languages. It is tag-based, which makes it look a lot like HTML and easier for client-side programmers to understand than some of the other choices. Because of the relative ease with which it is written, ColdFusion is sometimes assumed not to be so powerful. In fact, ColdFusion code is compiled to Java bytecode, which means the pages run quickly. Web developers can accomplish virtually any required task using the ColdFusion Markup Language (CFML). However, as ColdFusion can easily be integrated with Java applications, developers have the choice of using Java to extend ColdFusion applications. Java EE Java EE is used in large web projects. With its power and robustness comes a steep learning curve. Java EE is defined by its specification ( cle.com/javaee/) and API ( A Java Application Server (Java AS) manages servlets, JavaServer Pages (JSP), Web Services, and Enterprise JavaBeans (EJB). Java EE also includes a number of other APIs commonly linked to enterprise application development. JDBC, JPA, , JMS, and XML are some examples. But that's only part of the picture. There are a number of frameworks built on some of these technologies that streamlines the development process further. Hibernate offers most of the object/relational mapping (ORM) without an EJB Container. For this reason it's called a lightweight ORM 2. Ajax: A New Approach to Web Applications - Page 2 of 162 Copyright 2017 Webucator. All rights reserved.

10 A Quick Overview of Web Development technology. JavaServer Faces, Struts, and Spring-MVC build on JSP to do away with scriptlets completely, relying on HTML style tags and associated JavaBeans. ASP.NET Microsoft's ASP.NET is not a language, but a framework for writing websites and software. Like ColdFusion and JSP (and unlike traditional ASP) ASP.NET pages are precompiled, so they run faster than traditional ASP pages do. ASP.NET pages can be written in many languages, but the most popular are C# (pronounced C-sharp) and Visual Basic.NET (VB.NET). Python Like Perl, Python is open source. Python has been a popular programming language for a long time; it runs on commonly used web servers such as Apache. PHP Like Python, PHP is open source. It has rapidly become a popular alternative to the proprietary languages such as ColdFusion and ASP.NET. PHP is lightweight, relatively simple to learn, and runs web servers such as Apache. Node.js Node.js is a JavaScript framework that operates server machines. Therefore, the server side code is contained in scripts as opposed to compiled programs. Although Node.js can be run on a web server like Apache, HTTP servers can be written using Node.js. 1.3 Conclusion This lesson has provided a general overview of the different languages and frameworks commonly used in web development. Version: Printed: Page 3 of 162

12 2. Introduction to HTML In this lesson, you will learn To create a simple HTML page. 2. About HTML elements and attributes. 3. The difference between HTML and XHTML. 4. To create the skeleton of an HTML document. 5. About whitespace and HTML. 6. To output special characters in HTML. 7. How the introduction of HTML5 has affected HTML development. HyperText Markup Language (HTML) is the language behind most web pages. The language is made up of elements that describe the structure and format of the content on a web page. HTML is maintained by two separate groups: the World Wide Web Consortium (W3C) and WHATWG. See and for the specifications. In this lesson, we will look at the basics of HTML and HTML5, the latest version of HTML. 2.1 Getting Started We'll begin with a simple exercise. Version: Printed: Page 5 of 162

13 Exercise 1 5 to 15 minutes A Simple HTML Document In this exercise, you will create your first HTML document by simply copying the text shown below. The purpose is to give you some sense of the structure of an HTML document. 1. Open a simple text editor such as Notepad and create a new file. Do not use an HTML editor for this exercise. 2. Save the file as HelloWorld.html in the HTMLBasics/Exercises folder. Page 6 of 162 Copyright 2017 Webucator. All rights reserved.

14 3. Type the following exactly as shown: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>hello world!</title> </head> <body> <p> Hello world! </p> </body> </html> 4. Save the file again and then open it in your browser by navigating to the file in your folder system and double-clicking on it. The page should appear as follows: Version: Printed: Page 7 of 162

16 Version: Printed: Page 9 of 162

17 Exercise Solution HTMLBasics/Solutions/HelloWorld.html <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>hello world!</title> </head> <body> <p> Hello world! </p> </body> </html> Page 10 of 162 Copyright 2017 Webucator. All rights reserved.

18 2.2 The HTML Skeleton Code Sample At its simplest, an HTML page contains what can be thought of as a skeleton - the main structure of the page. It looks like this: HTMLBasics/Demos/Skeleton.html <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body>  </body> </html> The <head> Element The <head> element contains content that is not displayed on the page itself. Some of the elements commonly found in the <head> are: Title of the page (<title>). Browsers typically show the title in the "title bar" at the top of the browser window. Meta tags, which contain descriptive information about the page (<meta>). Script blocks, which contain JavaScript or vbscript code for adding functionality and interactivity to a page (<script>). Style blocks, which contain Cascading Style Sheet rules (<style>). References (or links) to external style sheets (<link>). The <body> Element The <body> element contains all of the content that appears on the page itself. Tags that can be placed within the scope of body tag will be covered thoroughly in this manual. Whitespace Extra whitespace is ignored in HTML. This means that all hard returns, tabs, and multiple spaces are condensed into a single space for display purposes. Version: Printed: Page 11 of 162

19 Code Sample HTMLBasics/Demos/Whitespace.html <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>whitespace Example</title> </head> <body> This is a sentence on a single line. This is a sentence with extra whitespace throughout. </body> </html> Page 12 of 162 Copyright 2017 Webucator. All rights reserved.

20 Code Explanation The two sentences in the code above will be rendered in exactly the same way. 2.3 HTML Elements HTML elements describe the structure and content of a web page. Tags are used to indicate the beginning and end of elements. The syntax is as follows: <tagname>element content</tagname> Version: Printed: Page 13 of 162

21 Attributes Tags often have attributes for further defining the element. Attributes come in name-value pairs. 3 Note that attributes only appear in the open tag, like so: <tagname att1="value" att2="value">element content</tagname> The order of attributes is not important. Empty vs. Container Tags The tags shown above are called container tags because they have both an open and close tag with content contained between them. Tags that do not contain content are called empty tags. The syntax is as follows: <tagname> or <tagname att1="value" att2="value"> Blocks and Inline Elements Block-level Elements Block elements are elements that separate a block of content. For example, a paragraph (<p>) element is a block element. Other block elements include: Lists (<ul> and <ol>) Tables (<table>) Forms (<form>) Divs (<div>) Inline Elements Inline elements are elements that affect only snippets of content and do not block off a section of a page. Examples of inline elements include: Links (<a>) 3. In HTML (without the X) some tags have attributes that don't take a value, like so: <tagname att1>element content</tagname> This is not allowed in XHTML. Page 14 of 162 Copyright 2017 Webucator. All rights reserved.

22 Images (<img>) Formatting tags (<b>, <i>, <tt>, etc.) 4 Phrase elements (<em>, <strong>, <code>, etc.) Spans (<span>) Comments Comments are generally used for one of three purposes. 1. To write helpful notes about the code, for example, why something is written in a specific way. 2. To comment out some code that is not currently needed, but may be used sometime in the future. 3. To debug a page. HTML comments are enclosed in . For example:  2.4 Special Characters Special characters (i.e., characters that do not show up on your keyboard) can be added to HTML pages using entity names and numbers. For example, a copyright 4. Many formatting tags have been deprecated in HTML 4.0 and XHTML 1.0. Although the ones listed here are not deprecated, their use is discouraged as the same effect can be accomplished with CSS. Version: Printed: Page 15 of 162

23 symbol () can be added using or. The following table shows some of the more common character references. 2.5 The HTML Version XHTML 1.0 and HTML 4.0, the precursors to HTML5 consist of the same sets of elements. HTML5, the latest version of HTML, introduces some new elements that will be covered in this course. The only difference between HTML and XHTML is that HTML is fairly flexible, whereas XHTML has strict rules. 5 HTML has a long history and several versions. Therefore, web pages exist that use deprecated tags and outdated techniques, such as formatting text with <b> or <i> tags to bold or italicize text. But with the introduction of HTML5, there is an easy 5. HTML is a SGML-based, whereas XHTML is XML-based. XML and SGML are both meta-languages (languages for defining other languages). XML applies stricter rules than SGML does. Page 16 of 162 Copyright 2017 Webucator. All rights reserved.

24 way out, which we highly recommend as it is both simpler and forward compatible. Older versions of HTML had complicated DOCTYPEs, but these days you can simply use the new HTML5 DOCTYPE: <!DOCTYPE HTML> This DOCTYPE is completely backward compatible and will make all browsers work in "standards mode." 2.6 HTML5 HTML5 is the latest version of HTML and is in widespread use. HTML5 introduced many useful tags and elements. The DOCTYPE has also been simplified: 1. Here is the new simpler DOCTYPE: <!DOCTYPE HTML> 2. Use this simpler meta tag to specify the character set: <meta charset="utf-8"> The opening of an HTML page should look like this: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> Many new elements are available in HTML5. Some of the elements improve the readability of the document. For example, the div element in HTML is used to define content regardless of whether the content is a header, a footer, a navigation bar, a section, or some other type of block. In HTML5, we can indicate the block content type more clearly with the following elements: nav, section, and article. HTML5 also introduces new form input controls by way of new attribute values for the type attribute. For example, input type="date" will cause a date picker to be displayed on browsers such as Edge and Chrome to assist the user with entering a date. If you specify input type=" ", then the user must enter a syntactically valid address. Also, HTML5 supports a range control (input Version: Printed: Page 17 of 162

25 type=" ") that allows the user to specify a numeric value using a slider control. HTML5 contains new media elements. For example the video element displays a control that permits the user to watch a video (e.g.,.mp4 file. The audio element displays a control that can be used to play an audio (e.g.,.mp3) file. The need for cookies has been greatly reduced in HTML5 thanks to "local storage" and "session storage" client-side technologies. Local storage can be accessed from within a web page and has no fixed expiration. Session storage is available to a web page within a specific browser tab. Both storage technologies eliminate extra network traffic because the data resides solely on the client. Local and session storage data is not directly accessible by HTML. Rather, JavaScript must be coded to access the data using the window.localstorage and window.sessionstorage objects. 2.7 lang Attribute The lang attribute is used to tell the browser (or other user agent) the language contained within an element. While it is not required, the W3C recommends that lang be included in the html tag of all HTML documents, like so: <html lang="en"> According to the W3C, this is helpful in: 6 Assisting search engines. Assisting speech synthesizers. Helping a user agent select glyph variants for high quality typography. Helping a user agent choose a set of quotation marks. Helping a user agent make decisions about hyphenation, ligatures, and spacing. Assisting spell checkers and grammar checkers. If a portion of the page is written in a different language, you can wrap that portion in a tag that includes the lang attribute, like this: <span lang="fr">bonjour, mon ami!</span> 6. Page 18 of 162 Copyright 2017 Webucator. All rights reserved.

26 2.8 Conclusion Introduction to HTML In this lesson, you have learned the basics of HTML. You should understand how an HTML page is structured and understand the basic syntax of HTML tags. In addition, you have learned some new features of HTML5, the latest version of HTML. Version: Printed: Page 19 of 162

Introduction to HTML EVALUATION COPY. (HTM101 version 3.1.5) Copyright Information. Copyright 2013 Webucator. All rights reserved.

Introduction to HTML EVALUATION COPY. (HTM101 version 3.1.5) Copyright Information. Copyright 2013 Webucator. All rights reserved. Introduction to HTML (HTM101 version 3.1.5) Copyright Information Copyright 2013 Webucator. All rights reserved. The Author Nat Dunn Nat Dunn founded Webucator in 2003 to combine his passion for web development