Scribd
Upload
114 views72 pages

It WS 01 - Lesson 01 - Introduction

The document discusses HTML, CSS, and JavaScript which are used for front-end web development. It specifically talks about how HTML is used to define the structure and semantics of web pages, CSS is used for presentation and layout, and JavaScript is used for interactive elements and behaviors. The document also discusses related topics like file formats, text editors, web servers, hosting, and the basics of HTML elements and syntax.

Uploaded by

cabiniangwynethf16
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
114 views72 pages

It WS 01 - Lesson 01 - Introduction

The document discusses HTML, CSS, and JavaScript which are used for front-end web development. It specifically talks about how HTML is used to define the structure and semantics of web pages, CSS is used for presentation and layout, and JavaScript is used for interactive elements and behaviors. The document also discusses related topics like file formats, text editors, web servers, hosting, and the basics of HTML elements and syntax.

Uploaded by

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

it-ws01

Web Systems Technologies I


Website
Web pages
HTML
Hypertext Markup Language
the structure of a Web page
Markup Language
Standard text-encoding system consisting of a set of symbols
inserted in a text document to control its structure, formatting,
or the relationship between its parts.
The most widely used markup languages are SGML (Standard
Generalized Markup Language), HTML (Hypertext Markup
Language), and XML (Extensible Markup Language).
The markup symbols can be interpreted by a device
(computer, printer, browser, etc.) to control how a document
should look when printed or displayed on a monitor. A marked-
up document thus contains two types of text: text to be
displayed and markup language on how to display it.
CSS
Cascading Style Sheet
JS
JavaScript
HTML / CSS / JS
Front-end web development

The development of the graphical user


interface of a website so that users can
view and interact with that website.
. HTML / CSS / JS
Front-end web development

The development of the graphical user


interface of a website so that users can
view and interact with that website.
Text Editors and/or IDE

.html / CSS / JS
Front-end web development

The development of the graphical user


interface of a website so that users can
view and interact with that website.
filename.html / CSS / JS
Front-end web development

The development of the graphical user


interface of a website so that users can
view and interact with that website.
index.html / CSS / JS
Front-end web development

The development of the graphical user


interface of a website so that users can
view and interact with that website.
Write codes using your text editor
save files locally
“upload”
Web
Server
Own PC as
Web
Server
rent
Web
Server
Hosting
Secure
Stable
Robust
FTP
“upload”
File Transfer Protocol
“upload”
File Transfer Protocol
“download”
File Transfer Protocol
“upload”
Web
Server
“online”
Browsers
Second-Level Geographical
Domain Domain

Subdomain Top-Level Domain

https://blog.hubspot.com.ph:80/virus/donotopen/xxx/index.html

Protocol Port Path or Directory


https://blog.hubspot.com.ph:80/virus/donotopen/xxx/index.html
https://blog.hubspot.com.ph:80/virus/donotopen/xxx/index.html
https://blog.hubspot.com.ph:80/virus/donotopen/xxx/index.html
index.html must be your landing page
HTML Basics
<b>si ed</b>

HTML HTML
Website Web pages Document Elements
HTML Document
Structure
index.html

1. Document type
2. HTML

1. Head
2. Body
index.html

1. Document type
2. HTML

1. Head • Title
2. Body • Link
• CSS (Internal or
embedded)
• Meta
• Script (JavaScript)
***typical
index.html

1. Document type
2. HTML

1. Head
2. Body • Semantic Elements (Layout)
• Text & Formatting Elements
• Media (Images, Video,
Audio)
• Forms
***in category
<b>si ed</b>

HTML Element
everything from the start tag to the end tag
HTML Element
Anatomy
Pair Tags
<>...</>
<p>lorem</p>
<p>lorem</p>

Tags
<p>lorem</p>

Start Tag or Open Tag


<p>lorem</p>

End Tag or Close Tag


<p>lorem</p>

Content
<p>lorem</p>

Tag Name
<p>lorem</p>

HTML Element
Singular Tags /
Unpaired Tags /
Standalone Tags /
Independent Tags
<>
<img src=“TalksALot.png” alt=“memes”>
<img src=“TalksALot.png” alt=“memes”>

Tag Name
<img src=“TalksALot.png” alt=“memes”>

Attribute
<img src=“TalksALot.png” alt=“memes”>

Attribute (also)
<img src=“TalksALot.png” alt=“memes”>

Attribute Name
<img src=“TalksALot.png” alt=“memes”>

Attribute Value
<img src=“TalksALot.png” alt=“memes”>

Attribute Name
<img src=“TalksALot.png” alt=“memes”>

Attribute Value
<img src=“TalksALot.png” alt=“memes”>

Constant???
<img src=“TalksALot.png” alt=“memes”>

HTML Element
<p id=“manok”>lorem</p>

Pair Tags with Attribute


<p id=“manok”>lorem</p>

Pair Tags with Attribute


<p id=“manok”>lorem</p>

Placement: Always inside of


the Start Tag
How to write your
codes in HTML?
O M M Y
O G NI T
HAT D

You might also like