1. AN INTRODUCTORY LESSON TO MAKING A SIMPLE WEB PAGE By: RC Emily Solis
HTML For beginners
AN INTRODUCTORY LESSON TO MAKING A SIMPLE WEB PAGE
By: RC Emily Solis

2. at the end of this lesson, you will know:
The definition of HTML and CSS
The different HTML Elements
How to build a simple web page

3. – Cascading Style Sheets
Html and css
– Hyper Text Markup Language – Used to give websites structure with texts, links, images, and other fundamental elements
HTML
CSS
– Cascading Style Sheets
– Used to change the permanent appearance of HTML Elements
These are the basic elements of a webpage: HTML and CSS. In this lesson, we will concentrate more on HTML and HTML elements.

4. Anatomy of an html element
OPENING TAG
CLOSING TAG
CONTENT
The figure above is an example of an HTML Element
The CONTENT is the only element that is visible to web users
All elements start with an opening tag and end with a closing tag. Both tags are enclosed in open and close angle brackets ( < > ). The content, the middle element found between the tags, is the only element visible to the web user.

5. HTML ELEMENTS: ADD A HEADING
Headings are frequently used HTML element. Think of them as headlines in a newspaper. There are 6 heading elements with h1 being the largest and h6 being the smallest. h4 h5 h6

6. HTML ELEMENTS: ADD A PARAGRAPH and an anchor element
By default, the anchor element changes the text’s color and underlines it, indicating that it is a link.
The HTML paragraph element is used to hold one or more sentences.
What if you wanted to add a link to a webpage? The HTML anchor element makes it possible to do this with a single click.
Anchor elements use an attribute to link users to websites. Attributes customize the behavior or appearance of HTML elements. Anchor elements use the href attribute, which specifies the webpage to link to.
A closer look of the anchor element syntax. Any valid URL can be used for the value of the href attribute. The URL must be enclosed in quotation marks. Text between the <a> and </a> can be as few or as many words as you would like.
Attribute Name
Link Text
Attribute Value
“any valid URL”

7. HTML ELEMENTS: ADDING IMAGES
To add images to a webpage, use the HTML image element. Image URLs typically end with a .jpg or .png file extension. The src attribute sets the source for an image element. Image elements are self-closing, which means they do not need a closing tag.
Want to change the photo that the image element displays? Just set the the value of src to a different photo’s URL.

8. HTML ELEMENTS: ADDING A VIDEO
The HTML video element can add a video to a webpage. The video element uses a number of attributes. Width and height sets the size of the screen that displays the video, controls adds play, pause, and volume control, source src sets the URL of the video to play, and type specifies the different video formats.
Remember: attribute values must be “in quotes”, except for controls (adds play, pause, volume control).

9. HTML ELEMENTS: CREATE AN UNORDERED LIST
ul tags
create the unordered list
li tags contain each list item
Another essential element is the unordered list. Items in an unordered list are plainly referred to as list items. Each items are bulleted, not numbered. Unordered lists can be used to organize content on a webpage in a number of ways.
With the video element earlier and this unordered list element, you may have noticed that these elements had other HTML elements nested inside of them. Web developers refer to the enclosing element as the parent element and the enclosed elements as the children. Code indentation signifies the relationship between parent and child elements
Parent Element
Code indentation signifies which are the parent and children
Children

10. HTML ELEMENTS: ADD A DIV
div elements divide the webpage by enclosing other elements and are often used with the class attribute
The … indicates where other HTML elements (children) would normally be enclosed by the div (parent element)
Let’s see another way the parent and children concepts are applied on a real-life webpage. Div elements divide your page by enclosing other elements. These enclosed groups of elements can then be organized, moved and styled independently from one another. Div elements are often used with the class attribute.

11. HTML ELEMENTS: METADATA
Tells the web browser to expect an HTML document
The root of the HTML document and parent of all other HTML elements on the webpage
Enclose other metadata about the site, such as its title
The last HTML elements we will explore are involved in metadata processes. You can think of these elements as the "brains" of a webpage because they communicate vital information to the web browser, but are not visible to a webpage visitor.
Contains the site’s title; makes the site easier to find through a search engine
Tells web browser which character set to use

12. You are now ready to build a simple webpage!!

13. p is used for non-heading text, such as paragraphs
SUMMARY
HTML stands for Hypertext Markup Language and is used to give a webpage structure
CSS stands for cascading stylesheets and is used to style HTML elements
h1 – h6 indicate text headings on a webpage. h1 is the largest while h6 is the smallest
p is used for non-heading text, such as paragraphs
These are the basic elements of a webpage: HTML and CSS.

14. SUMMARY
a is short for anchor and is used to add links to other webpages. Anchors typically have an href attribute
img is used to add an image to a webpage. Image elements are self-closing
video is used to add videos to a webpage, and uses multiple attributes and a nested source element
These are the basic elements of a webpage: HTML and CSS.

15. metadata tags provide metadata about a webpage
SUMMARY
unordered list is used to create lists on a webpage and requires the li elements inside the ul element
div is used to organize HTML elements into different groups, which can be given a class attribute
metadata tags provide metadata about a webpage
These are the basic elements of a webpage: HTML and CSS.

16. RECOMMENDED ADDITIONAL READING
reference
Codecademy (2016, Sep 17). Learn how to make a website. Retrieved from website/lessons/site-structure/exercises/html-css?action=lesson_resume
RECOMMENDED ADDITIONAL READING
Mening, Robert (2017, Jul 27). HTML Tutorial: Beginner’s Guide for URL:
Introduction to HTML – W3Schools (2016, Sep 21). URL: