HTML FOR BEGINNERS AN INTRODUCTORY LESSON TO MAKING

HTML FOR BEGINNERS AN INTRODUCTORY LESSON TO MAKING A SIMPLE WEB PAGE BY: RC EMILY SOLIS

AT THE END OF THIS LESSON, YOU WILL KNOW: 1 The definition of HTML and CSS 2 3 The different HTML Elements How to build a simple web page

HTML AND CSS • HTML– Hyper Text Markup Language – Used to give websites structure with texts, links, images, and other fundamental elements • CSS – Cascading Style Sheets – Used to change the permanent appearance of HTML Elements

ANATOMY OF AN HTML ELEMENT OPENING TAG CONTENT CLOSING TAG • The figure above is an example of an HTML Element • The CONTENT is the only element that is visible to web users

HTML ELEMENTS: ADD A HEADING h 1 h 2 h 3 h 4 h 5 h 6

HTML ELEMENTS: ADD A PARAGRAPH AND AN ANCHOR ELEMENT Attribute Name Link Text Attribute Value By default, the anchor element changes the text’s color and underlines it, indicating that it is a link.

HTML ELEMENTS: ADDING IMAGES • Want to change the photo that the image element displays? Just set the value of src to a different photo’s URL.

HTML ELEMENTS: ADDING A VIDEO • Remember: attribute values must be “in quotes”, except for controls (adds play, pause, volume control).

HTML ELEMENTS: CREATE AN UNORDERED LIST ul tags create the unordered list li tags contain each list item Parent Element • Code indentation Children signifies which are the parent and children

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)

HTML ELEMENTS: METADATA Tells the web browser to expect an HTML document Tells web browser which character set 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 Contains the site’s title; makes the site easier to find through a search engine

You are now ready to build a simple webpage!!

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 • h 1 – h 6 indicate text headings on a webpage. h 1 is the largest while h 6 is the smallest • p is used for non-heading text, such as paragraphs

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

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

REFERENCE • Codecademy (2016, Sep 17). Learn how to make a website. Retrieved from https: //www. codecademy. com/courses/make-awebsite/lessons/site-structure/exercises/htmlcss? action=lesson_resume RECOMMENDED ADDITIONAL READING • Mening, Robert (2017, Jul 27). HTML Tutorial: Beginner’s Guide for 2017. URL: https: //websitesetup. org/html-beginners-guide/ • Introduction to HTML – W 3 Schools (2016, Sep 21). URL: https: //www. w 3 schools. com/html/default. asp