Scribd
Upload
192 views

Basic HTML

This document provides an overview and introduction to HTML and CSS for beginners. It discusses what HTML and CSS are, the basic tools needed to get started, how to create an HTML file and page structure, common tags and their syntax, inline and block level elements, tag attributes, and new HTML5 semantic tags. The webinar will focus on HTML5 and then continue on to CSS, teaching the building blocks of the web and how to structure pages using basic HTML and preparation for learning CSS styles.

Uploaded by

JOLITO RAMOS
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
192 views

Basic HTML

This document provides an overview and introduction to HTML and CSS for beginners. It discusses what HTML and CSS are, the basic tools needed to get started, how to create an HTML file and page structure, common tags and their syntax, inline and block level elements, tag attributes, and new HTML5 semantic tags. The webinar will focus on HTML5 and then continue on to CSS, teaching the building blocks of the web and how to structure pages using basic HTML and preparation for learning CSS styles.

Uploaded by

JOLITO RAMOS
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML & CSS

WEBINAR
For Beginners
Part 1 – Basic HTML (Tagalog)
2

BEFORE WE BEGIN..
• This is for Beginners

HTML
• We will focus on HTML5 only

CSS
• Continuation of HTML5 course
• Everyone’s CSS is different
3

WHAT IS HTML
• Hyper Text Markup Language
• NOT a programming language
• Markup Language for creating web pages / documents
• Building blocks of the Web
4

WHAT WE NEED TO
START
Tools
• Chrome Browser
• Sublime Text3 or Visual Studio Code
• Filezilla

*Bonus* Making Money (Online)


• Upwork.com
• Fiverr.com
• Freelancer.com
5

CREATING AN HTML FILE


• Does NOT need a server
• File must end with the .html extension
• Runs in a web browser (Chrome, Firefox, etc)
• index.html is the root / home page of a website

http://www.example.com
Loads the index.html file

http://www.example.com/about.html
Loads the about.html file
6

“TAG” SYNTAX
<tagname>content</tagname> • Element names surrounded by
angle brackets
<h1>About</h1>
• Normally come with pairs (start
<p>This is a paragraph</p>
tag and end tag)
<br /> (self closing) • End tag is usually the same but
<br> (fine in HTML5)
with a forward slash
• Some tags close themselves
(Remnant of XHTML)
7

HTML PAGE STRUCTURE


<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Heading One</h1>

<p>This is a paragraph</p>

</body>

</html>
8

DOCTYPE
• Explains what type of document the page is
• HTML4, HTML5, XHTML, etc.

HTML5
<!DOCTYPE html>

HTML4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”
"http://www.w3.org/TR/html4/strict.dtd">

XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
9

INLINE VS BLOCK LEVEL


ELEMENTS
Inline Elements
• Do not start on a new line
• Take only the necessary width
<span> <strong> <em> <img> <a>

Block Elements
• Start on a new line
• Take full width available
<div> <h1> - <h6> <p> <form>
10

TAG ATTRIBUTES
<tagname • All tags can have attributes
attributename=“attributevalue”>content</tagname>
• Provide information about an
<h1 title=“Who we are”>About</h1> element
• Placed within the start tag
• Key/value pairs (id=“nameId”)
11

HTML5 SEMANTIC TAGS


<header></header>
A semantic element clearly describe its

meaning to both browser and developer. <footer></footer>

<aside></aside>

<main></main>

<article></ article >

<nav></nav>

<section></section>

<details></details>
THANK YOU!
Think positive! Keep safe everyone..

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy