Introduction to HTML: Overview and Structure

HTML Overview and Structure North Eastern Mindanao State University College of Information Technology Education Department of Computer Studies JHON MARK C. PALEN Prepared by:

• What is HTML • Preparing our Workspace • HTML Page Structure • Saving HTML File • First “Hello World” Topic Outlines

• 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 What is HTML?

We are currently using HTML5 which is the current standard and still updated up to this day.

Any software used to edit text, some text editor are specially made for coding that incorporates colored text for a certain language like HTML. Text Editor

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> HTML Examples

Browsers HTML Files are saved with the extension .html .htm Microsoft Edge Google Chrome Mozilla Firefox Opera Mini Safari

An HTML element is defined by a start tag, some content, and an end tag: What is an HTML Element? <h1>My First Heading.</h1> <p>My first paragraph.</p> Start Tag Element Content End Tag <h1> My First Heading. </h1> <p> My first paragraph. </p>

Describe how the website should appear in the browser. Elements <e> Content here! </e>

<e> Content here! </e> Describe how the website should appear in the browser. Elements Opening Tag Clossing Tag Most of the elements requires the opening and closing tag.

The standard starting structure of an HTML HTML Page Structure

The standard starting structure of an HTML HTML Page Structure Indicates that we're using HTML5 HTML element that start of our document Head element is used for the title, styling, scripts and other things to be linked in our HTML file. Body element contains the main content of our web page.

<DOCTYPE> Defines Version of HTML <html> Root of an HTML Document <head> Contains Page Information <body> Represent all page contents <base> Specifies default URL <meta> Define Meta Data <title> Defines Title <link> Relevant resources links Document Outline <style> Defines Style Resources <script> Defines Script Resources

HTML Text Elements & Formating

Comments are ignored and is not displayed in the webpage we use this to put notes in our code. Comments in HTML

Paragraphs in HTML are defined by the <p> tag. They are used to encapsulate blocks of text, such as sentences, paragraphs, or sections of content. The <p> tag tells the web browser that the enclosed text should be displayed as a paragraph. HTML Pharagraph <p>This is a paragraph in HTML.</p>

The <br> (break) element in HTML is used to insert a line break within text content. It is a self-closing tag, meaning it does not require an ending tag. Break Element <p>This is the first line.<br>This is the second line.</p>

We have different elements to formot our text Text Formatting Element <b> <strong> <i> <em> <mark> <small> <del> <ins> <sup> <sub> Bold Important Italic Empasized Marked Smaller Deleted Inserted Subscript Superscript <u> Underline <hr> Horizontal Rule

We have 6 different heading <h1> is the largest and <h6> is the smallest, heading are bold automatically. HTML Heading <h1> Heading 1 </h1> <h2> Heading 1 </h2> <h3> Heading 1 </h3> <h4> Heading 1 </h4> <h5> Heading 1 </h5> <h6> Heading 1 </h6>

HTML Links <a href = “”> <a href = “mailto:”> <a name = “name”> < a href =”#name”> Page Link Email Link Anchor Link to Anchor target =”_blank tag to open a link in a new tab

HTML Tables <table> <tr> <td> <th> Table row Table Data Table Header <thead> <tbody> <tfoot> Contains the table headers. Contains the main table data. Contains summary or footer information.

HTML Forms <input type = “text”> <input type = “password”> <input type = “email”> <input type = “radio”> <input type = “checkbox”> <input type="button"> Displays a single-line text input field Hide the text Link to Anchor Displays a radio button Displays a checkbox Displays a clickable button

The HTML style attribute is used to add styles to an element, such as color, font, size, and more. The HTML style attribute has the following syntax: HTML Styles <tagname style="property:value;"> The property is a CSS property. The value is a CSS value.

Set the background color for a page to powderblue: Example 1 - Background Color <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>

Set background color for two different elements <body> <h1 style="background-color:powderblue;">This is a heading</h1> <p style="background-color:tomato;">This is a paragraph.</p> </body> Text Color - The CSS color property defines the text color for an HTML element: Example 2 - Background Color Elements

Set background color for two different elements <body> <h1 style="background-color:powderblue;">This is a heading</h1> <p style="background-color:tomato;">This is a paragraph.</p> </body> Text Color - The CSS color property defines the text color for an HTML element: Example 3 - Text Color

The CSS font-family property defines the font to be used for an HTML element: <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p> Example 3 - Fonts

The CSS font-size property defines the text size for an HTML element: <h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p> Example 4 - Text Size

The CSS text-align property defines the horizontal text alignment for an HTML element: <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> Example 5 - Text Alignment

HTML colors are specified with predefined color names HTML Color <h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:Orange;">Orange</h1> <h1 style="background-color:DodgerBlue;">DodgerBlue</h1> <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1> <h1 style="background-color:Gray;">Gray</h1> <h1 style="background-color:SlateBlue;">SlateBlue</h1> <h1 style="background-color:Violet;">Violet</h1> <h1 style="background-color:LightGray;">LightGray</h1>

You can set the background color for HTML elements: Background Color in <p> <p style="background-color:Tomato;"> A Research University advancing technology and innovation for sustainable development. </p>

For your attention and participation Thank You! JHON MARK C. PALEN Instructor I

Introduction to HTML: Overview and Structure

More Related Content

Similar to Introduction to HTML: Overview and Structure

Recently uploaded

Introduction to HTML: Overview and Structure