+ All Categories
Home > Documents > TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY...

TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY...

Date post: 17-Mar-2020
Category:
Upload: others
View: 2 times
Download: 0 times
Share this document with a friend
28
TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited
Transcript
Page 1: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 2: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

Rapid Introduction to HTML, CSS, and JavaScript

(HCJ101 version 5.0.0)

Copyright Information

© Copyright 2019 Webucator. All rights reserved.

The Author

Nat Dunn

Nat Dunn founded Webucator in 2003 to combine his passion for technical trainingwith his business expertise and to help companies benefit from both. His previousexperience was in sales, business and technical training, and management. Nathas an MBA from Harvard Business School and a BA in International Relationsfrom Pomona College.

Accompanying Class Files

This manual comes with accompanying class files, which your instructor or salesrepresentative will point out to you. Most code samples and exercise and solutionfiles found in the manual can also be found in the class files at the locations indicatedat the top of the code listings.

Due to space limitations, the code listings sometimes have line wrapping, whereno line wrapping occurs in the actual code sample. This is indicated in the manualusing 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 linebreak in the middle of a word. When this occurs, we append the following symbolat the end of the line before the actual break: »»

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 3: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 4: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

Table of Contents1. A Quick Overview of Web Development..............................................1

Client-side Programming..................................................................................1HTML........................................................................................................1Cascading Style Sheets............................................................................1JavaScript ................................................................................................1Ajax...........................................................................................................1JavaScript Frameworks.............................................................................2

Server-side Programming.................................................................................2Java EE.....................................................................................................2ASP.NET...................................................................................................3Python.......................................................................................................3PHP...........................................................................................................3ColdFusion................................................................................................3Node.js......................................................................................................3

2. Introduction to HTML............................................................................5

Getting Started.................................................................................................5Exercise 1: A Simple HTML Document.............................................................6The HTML Skeleton..........................................................................................9

The <head> Element................................................................................9The <body> Element.................................................................................9Whitespace...............................................................................................9

Viewing Page Source......................................................................................11HTML Elements..............................................................................................12

Attributes.................................................................................................12Empty vs. Container Tags........................................................................12Blocks and Inline Elements.....................................................................13Comments...............................................................................................14

Special Characters.........................................................................................14History of HTML..............................................................................................15lang Attribute...................................................................................................17

3. Paragraphs, Headings, and Text.........................................................19

Paragraphs.....................................................................................................19Breaks and Horizontal Rules..........................................................................23Exercise 2: Creating an HTML Page...............................................................25Quoted Text.....................................................................................................28Preformatted Text............................................................................................29Text-Level Semantic Elements........................................................................31

iVersion: 5.0.0. Printed: 2019-02-12.

Table of Contents

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 5: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

4. HTML Links..........................................................................................35

Text Links........................................................................................................35Absolute vs. Relative Paths.............................................................................36

Absolute Paths........................................................................................36Relative Paths.........................................................................................37Default Pages..........................................................................................37

Targeting New Windows..................................................................................38Email Links.....................................................................................................38Exercise 3: Adding Links.................................................................................39Targeting a Specific Location on the Page......................................................42The title Attribute.............................................................................................44

5. HTML Images.......................................................................................47

Inserting Images.............................................................................................47Making Images Accessible......................................................................49Alternative Text........................................................................................49Long Descriptions...................................................................................50Height and Width Attributes....................................................................50

Image Links....................................................................................................51Exercise 4: Adding Images to the Page..........................................................52

6. HTML Lists...........................................................................................57

Unordered Lists..............................................................................................57Nesting Unordered Lists.........................................................................58

Ordered Lists..................................................................................................61Nesting Ordered Lists.............................................................................62The type Attribute....................................................................................64The start Attribute...................................................................................68

Definition Lists................................................................................................69Exercise 5: Creating Lists...............................................................................72

© Copyright 2019 Webucator. All rights reserved.ii

Table of Contents

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 6: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

7. Crash Course in CSS..........................................................................79

Benefits of Cascading Style Sheets................................................................79CSS Rules......................................................................................................80

CSS Comments......................................................................................80Selectors.........................................................................................................81

Type Selectors........................................................................................81Class Selectors.......................................................................................81ID Selectors............................................................................................82Attribute Selectors...................................................................................83The Universal Selector............................................................................83Grouping.................................................................................................84

Combinators...................................................................................................84Descendant Combinators.......................................................................84Child Combinators..................................................................................84General Sibling Combinators..................................................................85Adjacent Sibling Combinators.................................................................85

Precedence of Selectors.................................................................................86How Browsers Style Pages.............................................................................86CSS Resets....................................................................................................89CSS Normalizers............................................................................................91External Stylesheets, Embedded Stylesheets, and Inline Styles....................92

External Stylesheets...............................................................................92Embedded Stylesheets...........................................................................93Inline Styles.............................................................................................94

Exercise 6: Creating an External Stylesheet...................................................96Exercise 7: Creating an Embedded Stylesheet.............................................103Exercise 8: Adding Inline Styles....................................................................106<div> and <span>.........................................................................................108Exercise 9: Divs and Spans..........................................................................111Media Types..................................................................................................113Units of Measurement...................................................................................114

Absolute vs. Relative Units....................................................................114Pixels.....................................................................................................114Ems and Rems.....................................................................................114Percentages..........................................................................................116Other Units............................................................................................116

Inheritance....................................................................................................119The inherit Value...................................................................................121

iiiVersion: 5.0.0. Printed: 2019-02-12.

Table of Contents

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 7: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

8. CSS Fonts..........................................................................................125

font-family.....................................................................................................125Specifying by Font Name......................................................................125Specifying Font by Category.................................................................125

@font-face....................................................................................................129Getting Fonts.........................................................................................131

font-size........................................................................................................136Relative font-size Terms........................................................................136Best Practices.......................................................................................140

font-style.......................................................................................................141font-variant....................................................................................................141font-weight....................................................................................................142line-height.....................................................................................................145font................................................................................................................149Exercise 10: Styling Fonts.............................................................................154

9. Color and Opacity.............................................................................161

About Color and Opacity...............................................................................161Color and Opacity Values.............................................................................161

Color Keywords.....................................................................................161RGB Hexadecimal Notation..................................................................161RGB Functional Notation......................................................................162HSL Functional Notation.......................................................................162

color..............................................................................................................163opacity..........................................................................................................166Exercise 11: Adding Color and Opacity to Text.............................................170

10. CSS Text...........................................................................................177

letter-spacing................................................................................................177text-align.......................................................................................................178text-decoration..............................................................................................181text-indent.....................................................................................................183text-shadow...................................................................................................186text-transform................................................................................................188white-space...................................................................................................190word-break....................................................................................................193word-spacing................................................................................................195Exercise 12: Text Properties..........................................................................198

© Copyright 2019 Webucator. All rights reserved.iv

Table of Contents

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 8: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

11. JavaScript Basics............................................................................205

The Name "JavaScript".................................................................................205What is ECMAScript?...................................................................................205The HTML DOM...........................................................................................206JavaScript Syntax.........................................................................................206

Basic Rules...........................................................................................206Accessing Elements.....................................................................................207

Dot Notation..........................................................................................207Square Bracket Notation.......................................................................207

Where Is JavaScript Code Written?..............................................................208JavaScript Objects, Methods and Properties................................................212

Methods................................................................................................212Properties..............................................................................................213

Exercise 13: Alerts, Writing, & Changing Background Color........................215

12. Variables, Arrays and Operators....................................................219

JavaScript Variables......................................................................................219A Loosely Typed Language...................................................................219Google Chrome DevTools.....................................................................220Variable Naming....................................................................................224Storing User-Entered Data....................................................................225

Exercise 14: Using Variables.........................................................................229Constants......................................................................................................231Arrays............................................................................................................231Exercise 15: Working with Arrays..................................................................235

Associative Arrays.................................................................................241Array Properties and Methods..............................................................241

Playing with Array Methods..........................................................................244JavaScript Operators....................................................................................245The Modulus Operator..................................................................................248Playing with Operators..................................................................................249The Default Operator....................................................................................253Exercise 16: Working with Operators............................................................256

13. JavaScript Functions......................................................................265

Global Objects and Functions.......................................................................265parseFloat(object).................................................................................265parseInt(object).....................................................................................266isNaN(object)........................................................................................267

Exercise 17: Working with Global Functions.................................................268User-defined Functions.................................................................................274

Function Syntax....................................................................................274Passing Values to Functions.................................................................275

Exercise 18: Writing a JavaScript Function...................................................278Returning Values from Functions..........................................................284

vVersion: 5.0.0. Printed: 2019-02-12.

Table of Contents

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 9: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

14. Built-In JavaScript Objects.............................................................287

String............................................................................................................287Math..............................................................................................................292Date..............................................................................................................295Helper Functions...........................................................................................300Exercise 19: Returning the Day of the Week as a String..............................301

15. Conditionals and Loops.................................................................305

Conditionals..................................................................................................305if - else if - else Conditions....................................................................305

Short-circuiting .............................................................................................310Switch / Case................................................................................................315Ternary Operator...........................................................................................320Truthy and Falsy............................................................................................321Exercise 20: Conditional Processing.............................................................323Loops............................................................................................................326

while Loop Syntax.................................................................................326do...while Loop Syntax..........................................................................327for Loop Syntax.....................................................................................328for...of Loop Syntax...............................................................................329for...in Loop Syntax...............................................................................330

break and continue.......................................................................................330Exercise 21: Working with Loops..................................................................333Array: forEach().............................................................................................336

16. Event Handlers and Listeners........................................................337

On-event Handlers........................................................................................337The getElementById() Method..............................................................338

Exercise 22: Using On-event Handlers.........................................................340The addEventListener() Method...................................................................344Capturing Key Events...................................................................................351Exercise 23: Adding Event Listeners............................................................353

Benefits of Event Listeners...................................................................358Timers...........................................................................................................359Exercise 24: Typing Test................................................................................364

© Copyright 2019 Webucator. All rights reserved.vi

Table of Contents

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 10: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

A Quick Overview of Web Development1.In this lesson, you will learn...1. About client-side web development languages.2. About server-side web development languages.

Web development involves a combination of client-side programming and server-sideprogramming.

Client-side Programming1.1

Client-side programming involves writing code that is interpreted by a browser,such as Google Chrome or Safari, whether it be on your desktop or mobile device.The most common languages and technologies used in client-side programming areHTML, JavaScript, and Cascading Style Sheets (CSS).

HTMLHyperText Markup Language (HTML) is the language behind most web pages. Thelanguage is made up of elements that describe the structure and format of the contenton a web page.

Cascading Style SheetsCascading Style Sheets (CSS) are used in HTML pages to separate formatting andlayout from content. Rules defining color, size, positioning, and other display aspectsof 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 beused to validate forms, pop up new windows, and create dynamic effects such asdrop-down menus and image rollovers.

1. The word "JavaScript" is a trademark of Oracle. Microsoft's version of this language is called JScript.

Page 1 of 369Version: 5.0.0. Printed: 2019-02-12.

A Quick Overview of Web Development

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 11: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

AjaxThe term Ajaxwas originally a pseudo-acronym for "Asynchronous JavaScript AndXML" but is now used much more broadly to cover all methods of communicatingwith a server using JavaScript.

The main purpose of Ajax is to provide a simple and standard means for a web pageto communicate with the server without a complete page refresh.

JavaScript FrameworksJavaScript frameworks are frameworks written in JavaScript that create a differentapproach to web application design. Popular frameworks include Angular2, React3,Vue.js4, and jQuery5. You should learn JavaScript before beginning to work with aJavaScript framework.

Server-side Programming1.2

Server-side programming involves writing code that connects web pages withdatabases, XML pages, email servers, file systems, and other systems and softwareaccessible from the web server. The most common server-side languages andprogramming frameworks are Java Enterprise Edition6, ASP.NET7, Python8, PHP9,ColdFusion10, and Node.js11.

Java EEJava EE is used in large web projects. With its power and robustness comes a steeplearning curve. Java EE is defined by its specification (http://download.oracle.com/javaee/) and API (http://download.oracle.com/javaee/7/api/). A JavaApplication Server (Java AS) manages servlets, JavaServer Pages (JSP), WebServices, and Enterprise JavaBeans (EJB). Java EE also includes a number of otherAPIs commonly linked to enterprise application development. JDBC, JPA, e-mail,JMS, and XML are some examples. But that's only part of the picture. There are anumber of frameworks built on some of these technologies that streamlines the

2. See https://angular.io/.3. See https://reactjs.org/.4. See https://vuejs.org/.5. See http://jquery.com/.6. See http://www.oracle.com/technetwork/java/javaee/overview/index.html.7. See https://www.asp.net/.8. See https://www.python.org/.9. See http://www.php.net/.10. See https://www.adobe.com/products/coldfusion-family.html.11. See https://nodejs.org/en/.

© Copyright 2019 Webucator. All rights reserved.Page 2 of 369

A Quick Overview of Web Development

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 12: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

development process further. Hibernate offers most of the object/relational mapping(ORM) without an EJB Container. For this reason it's called a lightweight ORMtechnology. JavaServer Faces, Struts, and Spring-MVC build on JSP to do awaywith scriptlets completely, relying on HTML style tags and associated JavaBeans.

ASP.NETMicrosoft's ASP.NET is not a language, but a framework for writing websites andsoftware. Like ColdFusion and JSP (and unlike traditional ASP) ASP.NET pagesare precompiled, so they run faster than traditional ASP pages do. ASP.NET pagescan be written in many languages, but the most popular are C# (pronounced C-sharp)and Visual Basic .NET (VB.NET).

PythonPython has been a popular open source programming language for a long time. Thereare many web frameworks based on Python, the most popular of which is Django12.

PHPLike Python, PHP is open source. It is the language behind WordPress and has longbeen a popular alternative to proprietary languages such as ColdFusion andASP.NET.PHP is lightweight and relatively simple to learn.

ColdFusionColdFusion, created by Allaire (now owned by Adobe), is arguably the simplest ofall server-side languages. It is tag-based, which makes it look a lot like HTML andeasier for client-side programmers to understand than some of the other choices.Because of the relative ease with which it is written, ColdFusion is sometimesassumed not to be so powerful. In fact, ColdFusion code is compiled to Java bytecode,which means the pages run quickly.

Node.jsNode.js is a JavaScript framework that runs on the server, allowing developers touse JavaScript for server-side scripting as well as client-side scripting.

12. See https://www.djangoproject.com/.

Page 3 of 369Version: 5.0.0. Printed: 2019-02-12.

A Quick Overview of Web Development

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 13: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

Conclusion1.3This lesson has provided a general overview of the different languages andframeworks commonly used in web development.

© Copyright 2019 Webucator. All rights reserved.Page 4 of 369

A Quick Overview of Web Development

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 14: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

Introduction to HTML2.In this lesson, you will learn...1. To create a simple HTML page.2. About HTML elements and attributes.3. To create the skeleton of an HTML document.4. About whitespace and HTML.5. To output special characters in HTML.6. About the history of HTML.

HyperText Markup Language (HTML) is the language behind most web pages. Thelanguage is made up of elements that describe the structure of the content on a webpage.

HTML is maintained by two separate groups: the World Wide Web Consortium(W3C) and WHATWG. See https://www.w3.org/html/ andhttps://html.spec.whatwg.org/ for the specifications. In this lesson, we will look atthe basics of HTML.

Getting Started2.1

We'll begin with a simple exercise.

Page 5 of 369Version: 5.0.0. Printed: 2019-02-12.

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 15: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

A Simple HTML DocumentExercise 15 to 15 minutes

In this exercise, you will create your first HTML document by simply copying thetext shown below. The purpose is to give you some sense of the structure of anHTML document.

1. Create a new file in your editor.2. Save the file as hello-world.html in the HTMLBasics/Exercises folder.3. Type the following exactly as shown:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><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 filein your folder system and double-clicking on it. The page should appear asfollows:

© Copyright 2019 Webucator. All rights reserved.Page 6 of 369

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 16: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

Page 7 of 369Version: 5.0.0. Printed: 2019-02-12.

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 17: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

Exercise Solution

HTMLBasics/Solutions/hello-world.html

<!DOCTYPE html>1.<html lang="en">2.<head>3.<meta charset="UTF-8">4.<meta name="viewport" content="width=device-width, initial-scale=1">5.<title>Hello world!</title>6.</head>7.<body>8.<p>9.Hello world!10.

</p>11.</body>12.</html>13.

© Copyright 2019 Webucator. All rights reserved.Page 8 of 369

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 18: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

The HTML Skeleton2.2

At its simplest, an HTML page contains what can be thought of as a skeleton - themain structure of the page. It looks like this:

Code Sample

HTMLBasics/Demos/skeleton.html

<!DOCTYPE html>1.<html lang="en">2.<head>3.<meta charset="UTF-8">4.<meta name="viewport" content="width=device-width, initial-scale=1">5.<title></title>6.</head>7.<body>8.<!--Content that appears on the page-->9.

</body>10.</html>11.

The <head> ElementThe <head> element contains content that is not displayed on the page itself. Someof the elements commonly found in the <head> are:

• Title of the page (<title>). Browsers typically show the title in the "titlebar" at the top of the browser window.

• Meta tags, which contain descriptive information about the page (<meta>).• Script blocks, which contain JavaScript code for adding functionality and

interactivity to a page (<script>).• Style blocks, which contain Cascading Style Sheet rules (<style>).• References (or links) to external s (<link>).

The <body> ElementThe <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 thoroughlyin this course.

Page 9 of 369Version: 5.0.0. Printed: 2019-02-12.

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 19: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

WhitespaceExtra whitespace is ignored in HTML. This means that all hard returns, tabs, andmultiple spaces are condensed into a single space for display purposes.

Code Sample

HTMLBasics/Demos/whitespace.html

<!DOCTYPE html>1.<html lang="en">2.<head>3.<meta charset="UTF-8">4.<meta name="viewport" content="width=device-width, initial-scale=1">5.<title>Whitespace Example</title>6.</head>7.<body>8.This is a sentence on a single line.9.

10.This11.is12.a13.sentence with14.

extra whitespace15.throughout.16.

17.</body>18.</html>19.

© Copyright 2019 Webucator. All rights reserved.Page 10 of 369

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 20: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

Code Explanation

The two sentences in the code above will be rendered in exactly the same way.

Viewing Page Source2.3

Most browsers will let you view the source of an HTML page. This is a useful wayto see what the browser sees. In Google Chrome, you can do this by right-clickingon the page and selecting View Page Source:

You will see the source of the page you created:

Page 11 of 369Version: 5.0.0. Printed: 2019-02-12.

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 21: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

Notice that Chrome does see all the white space in the page source. But it condensesit when it presents the page.

HTML Elements2.4

HTML elements describe the structure and content of a web page. Tags are used toindicate the beginning and end of elements. The syntax is as follows:

<tagname>Element content</tagname>

AttributesTags often have attributes for further defining the element. Attributes usually comein name-value pairs.

Note that attributes only appear in the open tag, like so:

<tagname att1="value" att2="value">Element content</tagname>

There are some attributes that do not need to take a value. You can think of them asbeing "on" when the attribute is present and "off" when it is not. For example:

Attribute with No Value

<tagname att>Element content</tagname>

The order of attributes is not important.

© Copyright 2019 Webucator. All rights reserved.Page 12 of 369

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 22: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

Empty vs. Container TagsThe tags shown above are called container tags because they have both an open andclose tag with content contained between them. Tags that do not contain content arecalled empty tags. The syntax is as follows:

<tagname>

or

<tagname att1="value" att2="value">

Shortcut Close

Empty tags may also be written as follows:

<tagname />

or

<tagname att1="value" att2="value" />

The forward slash (/) at the end, just before the close angle bracket (>), explicitlyindicates that this tag is closed. It also makes the tag XML compliant. In general, itis not necessary to use this shortcut close, but it also doesn't cause any harm. Ouronly recommendation is that if you use it, use it consistently.

Blocks and Inline Elements

Block-level Elements

Block elements are elements that separate a block of content. For example, aparagraph (<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 blockoff a section of a page. Examples of inline elements include:

Page 13 of 369Version: 5.0.0. Printed: 2019-02-12.

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 23: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

• Links (<a>)• Images (<img>)• Form elements (<input>, <button>, <select>, <textarea>, etc.)• Phrase elements (<em>, <strong>, <code>, etc.)• Spans (<span>)

CommentsComments are generally used for one of three purposes.

1. To write helpful notes about the code, for example, why something is writtenin a specific way.

2. To comment out some code that is not currently needed, but may be usedsometime in the future.

3. To debug a page.

HTML comments are enclosed in <!-- and -->. For example:

<!-- This is an HTML comment -->

Special Characters2.5

Special characters (i.e., characters that do not show up on your keyboard) can beadded to HTML pages using entity names and numbers. For example, a copyright

© Copyright 2019 Webucator. All rights reserved.Page 14 of 369

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 24: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

symbol () can be added using &copy; or &#169;. The following table shows someof the more common character references.

History of HTML2.6

HTML has a long history and several versions:

1. HTML was invented in the early 1990s.

Page 15 of 369Version: 5.0.0. Printed: 2019-02-12.

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 25: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

2. In 1996, the World Wide Web Consortium (W3C)13 began maintaining theHTML specification. At that point HTML was already on version 2.0.

3. HTML 3.2 and HTML 4.0 were both released in 1997.4. XHTML, a separate XML version of HTML, was released in 2000.5. HTML5 was released in 2014, updated to HTML 5.1 (now with a space) in

2016, and then to HTML 5.2 in 2017.

Today, two separate groups, the W3C and WHATWG14 manage separate HTMLspecifications, with at least a little tension between the two groups. FromWHATWG'swebsite: "Although we have asked them to stop doing so, the W3C also republishessome parts of this specification as separate documents."

As a web developer, you don't need to be too concerned with this history. Theimportant question is: what can you do today? Probably the best, most up-to-dateonline reference is kept by Mozilla at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference.

Because people have been writing HTML for a long time, web pages exist that usedeprecated tags and outdated techniques, such as formatting text with <b> or <i>tags to bold or italicize text. Modern browsers tend to be backward compatible, butyou should avoid using any deprecated tags and attributes. To indicate that you areusing the latest version of HTML, you should use the following DOCTYPE at thebeginning of every HTML document:

<!DOCTYPE html>

This DOCTYPE is completely backward compatible and will make all browsers workin "standards mode."

Although they are not required, you should generally us the following meta tags:

<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">

The first specifies the character set and the second15 makes web pages adjust fordifferent screen sizes.

HTML5 / HTML 5

You may hear a lot about HTML5 or HTML 516. For a few years, the distinctionbetween HTML 4 and HTML 5 was important. Today, you can simply think of

13. See https://www.w3.org/standards/techs/html.14. See https://html.spec.whatwg.org.15. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag.16. WHATWG calls it HTML5. The W3C calls it HTML 5 with a space.

© Copyright 2019 Webucator. All rights reserved.Page 16 of 369

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 26: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

everything as just HTML. The HTML you use will be determined more by whatmodern browsers support than by what the specifications specify.

The opening of an HTML page should look like this (assuming your page is inEnglish):

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">

lang Attribute2.7

The lang attribute is used to tell the browser (or other user agent) the languagecontained within an element. While it is not required, the W3C recommends thatlang be included in the html tag of all HTML documents, like so:

<html lang="en">

According to the W3C, this is helpful in:17

• 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 portionin a tag that includes the lang attribute, like this:

<span lang="fr">Bonjour, mon ami!</span>

Conclusion2.8In this lesson, you have learned the basics of HTML. You should understand howan HTML page is structured and understand the basic syntax of HTML tags. Inaddition, you have learned some of the history of HTML.

17. See https://www.w3.org/International/questions/qa-html-language-declarations.

Page 17 of 369Version: 5.0.0. Printed: 2019-02-12.

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 27: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

© Copyright 2019 Webucator. All rights reserved.Page 18 of 369

Introduction to HTML

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited

Page 28: TRAINING MATERIALS FOR IT PROFESSIONALS · TRAINING MATERIALS FOR IT PROFESSIONALS EVALUATION COPY Unauthorized Reproduction or Distribution Prohibited

7400 E. Orchard Road, Suite 1450 NGreenwood Village, Colorado 80111

Ph: 303-302-5280www.ITCourseware.com

9-38-00233-000-02-25-19

EVALUATION COPY

Unauthorized Reproduction or Distribution Prohibited


Recommended