IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER HTML – the foundation

Housekeeping You will need to create a Github account. Go to Github.com and register there. Go to freecodecamp.com and create an account there. Go to Slack.com and install slack in your computer. I have sent you an invitation to join this group. Go to notepad-plus-plus.org and download and install Notepad++.

Review Recall how a browser constructs a Website from documents the server gives it, such as index.html. HTML shows the basic structure of the page, with text and links. Only very basic styling is possible with HTML. The browser parses index.html and other documents. Parsing means the browser reads one line at a time and does what each line says to do. Recall Object Oriented Programming: Everything is an object, with properties and values. Methods and functions can access and change properties and values.

HTML terms In HTML, objects are also called elements. Typical elements are paragraphs, text, links, headlines, boxes and even the HTML page itself. HTML elements can have properties like width, height, color and more. Tags define elements and hold instructions. In HTML, tags use arrows. Tags hold directions to the browser and the browser doesn’t display tags. Instead, the browser does what the tags instruct and browser displays that. Tags tell the browser what kind of element to display, like a paragraph or headline, and how to make it look.

HTML tags For example, this is how you create a paragraph in HTML: This is the text people see on the web page The browser doesn’t display the tags, but does show the text between the tags. Notice you must have opening and closing tags. This defines the element. Notice how the closing tag has a slash in it. A few tags are self closing and we’ll discuss those later. Consider the paragraph element we just created. What properties could it have? What values?

Your first HTML page Create a folder somewhere in your computer and call it projects Inside that, right-click and create a text document and call it index.html Open index.html with Notepad++ A browser needs to know what kind of document it’s dealing with. At the top of the document, type the opening HTML tag: At the bottom of the document, type the closing HTML tag:

Add sections Next, add head and body sections. The head section holds additional instructions for the browser but the browser doesn’t display anything that’s inside the element. Only the body section holds stuff that the browser will display. Indent every line two spaces.

Add text and other elements Inside body, type in a paragraph and add text and your name. Hello, my name is Marty Notice how is completely inside. That makes a child of

HTML attributes Remember how objects/elements have properties. Guess what – even properties can have their own properties! HTML also has the “attribute,” a special kind of property, because it has other properties. The code for an HTML attribute always has the attribute name, an equal sign (=), followed by quotes, another property, and value of the property, with ending quotes. If we wanted to make our blue, we need to give it three things: a style attribute, a color property and a value of blue.

The DOM Notice how your code is indented and some lines are indented more than others. Each line is its own object, also called a “node.” All the nodes combine to make the document tree. This is the Document Object Model. Later, we will learn how JavaScript can target nodes and change the values of their properties.

HTML documents have hierarchy and family structure In the HTML Document Object Model, everything is a node – every element and is a node and its attributes and properties are also nodes. All elements are nodes, but not all nodes are elements. The document itself is a document node. All HTML elements are element nodes. All HTML attributes are attribute nodes. Text inside HTML elements are text nodes. Elements can have child nodes that are other elements, text nodes or comment nodes.

Inheritance – children and parents Nodes contained inside the tags of other nodes are children of the nodes that contain them. Nodes are parents of the nodes inside their tags. Nodes that are before or after other nodes, but not inside them, are sibling nodes. Remember, nodes are objects and have properties and node properties have values.

Everything is a child of the element The and elements are children of the element All following elements are children of has a child: the text inside and its children are in notes has no child elements has one child, a element These elements are siblings Why? has 8 child elements. Can you name them? This is the first child of, and are siblings. What are their children? What element is the first child of ? What element is the third child of ? This is the second child of

More inheritance Nodes inherit properties and values from their parents. For example, if you make the text in the element blue, the text in all the child elements will be blue. You can change and make exceptions to inheritance, though. We use Cascading Style Sheets to give properties to HTML attributes, and to give values to those properties.