IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER...
18
IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER HTML – the foundation
-
Upload
flora-lambert -
Category
Documents
-
view
213 -
download
0
description
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. Recall Object Oriented Programming: Everything is an object, with properties and values. Methods and functions can access and change properties and values.
Transcript of IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER...
IN THIS LESSON, WE WILL BECOME FAMIL IAR 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.
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.
Tags define elements. In HTML, tags use arrows. Tags are directions to the browser, so the browser doesn’t display them. Instead, the browser does what the tags instruct and browser displays that.
HTML tags
For example, this is how you create a paragraph in HTML:
<p>This is the text people see on the web page</p>
The browser doesn’t display the tags, but does show the text between the tags. Notice you have to have and 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: <html>
At the bottom of the document, type the closing HTML tag: </html>
Add sections
Next, add head and body sections. The head section holds additional instructions and links, which we’ll talk about later. The body section holds stuff that the browser will display. Indent two spaces.
<html> <head> </head> <body> </body><html>
Add text and other elements
Inside body, type in a paragraph and add text and your name
<html> <head> </head> <body> <p>Hello, my name is Marty</p> </body><html>
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 is tied to other properties. The code for an HTML attribute always consists of the attribute name, an equal sign (=), followed by quotes, another property, and value of the property, with ending quotes.
The DOM
Notice how your code is indented. 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.
DOM hierarchy
HTML documents have a hierarchy and family structure.
In the HTML Document Object Model, everything is a node.
The document itself is a document nodeAll HTML elements are element nodesAll HTML attributes are attribute nodesText inside HTML elements are text nodesElements can have child nodes that are
element nodes, text nodes or comment nodes.
Inheritance
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.
Nodes inherit properties and values from their parents. For examples, if you make the text in the body element blue, the text in all the child elements will be blue.
You can change and make exceptions, though.
CSS-Cascading Style Sheets
CSS is used to style HTML. With CSS, you can create boxes, shadows and more. CSS provides properties and values for HTML attributes.
We’re going to use inline CSS. This when you put CSS directly into the opening element tag.
Ordinarily, your CSS is in a separate file, called a stylesheet. You embed a link to the stylesheet in the head of the HTML document.
Add some styling
Let’s go back to your paragraph and give it an attribute called style, which is used a lot in HTML:
<p style>Hello, my name is Marty</p>Now, let’s use CSS to give the style attribute a
color property, with a value of red:<p style=”color:red”>Hello, my name is
Marty.</p>Now save the document and open it with
Chrome. What happened and how did it happen?
Practice
Let’s do exercises on http://www.freecodecamp.com/challenges/say-hello-to-html-elemurents. I will help.
Then, we will take a break and apply our knowledge of HTML to the page you created. Use other properties and values with the style attribute in your paragraph.
We can also put several properties and values after a single attribute. Let’s do that with style. Notice the semicolon and how the quotes enclose all the properties.
<p style="color:red; font-family:sans-serif">
Adding more objects
Let’s add some photos to your site. Find a photo in your computer and call it test.jpg.
Inside the folder “projects,” create a new folder called “images.” Copy the photo of yourself in there and call it “me.jpg”
Use the <img/> tag, one of the few self-closing tags. In Notepad++, put this somewhere in the body of your index page.
Adding a property and value
The <img/> needs an HTML attribute called source.
<img src/>But the source property needs a value. In HTML,
the values are in quotation marks after the equal sign. For the <img/> tag, the value happens to be a pathway to the photo:
<img src=“img/test.jpg”>Notice how the source attribute has no property,
but only a value. And the value is a path to the photo.
You can do a lot!
Go to www.w3schools.com/cssref/ . On that page is a list of many HTML properties you can control with CSS.
Check on slack for the HTML and CSS files for the resume assignment and copy those into a new folder called resume. The resume folder should have files called index.html and styles.css. I have disconnected the stylesheet from the index file for now.
Work on your resume at home. Use the assignment as an example. Paste your own information in place of mine.
Feel free to experiment and we will work on your resume next class.
