WebDev-Lesson-2 PDF

Overview This lesson will provide the learners understanding of webpage using HTML structure, tags and elements. Learning Objectives At the end of the lesson you should be able to: 1. Define the following terms: a. HTML b. Webpage 2. Familiarize with the HTML structure...

Overview This lesson will provide the learners understanding of webpage using HTML structure, tags and elements. Learning Objectives At the end of the lesson you should be able to: 1. Define the following terms: a. HTML b. Webpage 2. Familiarize with the HTML structure programming and tags and elements. 3. Familiarize with HTML elements basic attributes. 4. Identify the different HTML tags and elements use to create the contents of webpage. 5. Create webpage using HTML tags and elements.  HTML (Hypertext Markup Language) is a text-based approach to describing how content contained within an HTML file is structured. This markup tells a web browser how to display text, images and other forms of multimedia on a webpage. HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.  A webpage, or web page, is a document composed using a markup language like HTML so that web browsers can read it. Webpages have distinct features, text, and URLs so people can access them directly. It is important to note that it is different from a website because a web page is a single page, while a website comprises several pages.  HTML structure starts with a beginning tag and ends with end tag. Almost all of the html tags has beginning tag and end tag. It is enclosed with an angle bracket. …….   Dashboard | Webpage Hello, BSIT 3-2! a. Paragraph is denoted by …. b. List Ordered list is denoted by … Unordered list is denoted by … c. Links is denoted by an anchor tag … d. Images is denoted by tag e. Table is denoted by …. Table row is denoted by …. Table data is denoted by …. f. Forms is denoted by …. tag An HTML element is defined by a start tag, some content, and an end tag. Content goes here... Examples of some HTML elements: My First Heading My first paragraph.  HTML attribute is used to define the characteristics of an HTML element and is placed inside the elements opening tag. All attributes are made of two parts – name and value. The name is the property you want to set. For example, the paragraph element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page. The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right. ATTRIBUTE OPTIONS FUNCTION Align Right, Left, Center Horizontally aligns tags Valign Top, Middle, Bottom Vertically aligns tags within an HTML element. Numeric, Hexadecimal, RGB Bgcolor Places a background color behind an element Values Background URL Places a background image behind an element Id User Defined Names an element for use with Cascading Style Sheets. Class User Defined Classifies an element for use with Cascading Style Sheets. Width Numeric value Specifies the width of tables, images, or table cells. Height Numeric value Specifies the height of tables, images, or table cells. title User defined "Pop-up" title of the elements. 1. Layout Responsive Layouts, Fluid Layouts, Fixed Layouts 2. Colors Monochrome, Complementary Colors 3. Visual Hierarchy 4. Interactive Elements 5. Navigation 1. Hamburger Navigation, Top Navigation, Footer Navigation 6. Imagery 7. Content 8. Fonts Serif Fonts, Sans-Serif Fonts 1. Layout Responsive Layouts, Fluid Layouts, Fixed Layouts 2. Colors Monochrome, Complementary Colors 3. Visual Hierarchy 4. Interactive Elements 5. Navigation 1. Hamburger Navigation, Top Navigation, Footer Navigation 6. Imagery 7. Content 8. Fonts Serif Fonts, Sans-Serif Fonts