Scribd
Upload
2 views

Web Development Basics of HTML

The document provides an introduction to web development, focusing on HTML as the main markup language for creating web pages. It covers the roles of web developers, the structure of HTML, and various HTML elements and tags, including headings, paragraphs, images, and styles. Additionally, it discusses how to write HTML code and the importance of proper formatting for web content.

Uploaded by

Andre Deyniel Cabrera
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Web Development Basics of HTML

The document provides an introduction to web development, focusing on HTML as the main markup language for creating web pages. It covers the roles of web developers, the structure of HTML, and various HTML elements and tags, including headings, paragraphs, images, and styles. Additionally, it discusses how to write HTML code and the importance of proper formatting for web content.

Uploaded by

Andre Deyniel Cabrera
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 40

Web

Development:
The Basics of
HTML
CSCC 101 – Introduction to
Computing
Web
Development
CSCC 101 – Introduction to
Computing
3

Web Development
▸ It refers to the tasks associated with
developing websites for hosting via
intranet or internet.
▸ The process includes web design, web
content development, client-side/server-
side scripting and network security
configuration.
▸ It also encompasses all the actions,
updates, and operations required to build,
4

Web Developers
▸ Also called web devs.
▸ Those professional who always
develops and maintains the web.
▸ Most web developers use Hypertext
Markup Language (HTML), Cascading
Style Sheets (CSS), and JavaScript to
develop websites.
5

How to Access the Web?


▸ Browsers
▸ Web Servers
▸ Devices
6

How Websites Created?


▸ All websites use HTML and CSS,
but content management
systems, blogging software,
and e-commerce platforms often
add a few more technologies to
become complex.
Brief Overview of
HTML
CSCC 101 – Introduction to Computing
8
HTML (Hypertext Markup
Language)
▸ It is main markup language for describing the
structure of web pages and it is the basic
building block of World Wide Web.
▸ Hypertext is text displayed on a computer or
other electronic device with references to
other text that the user can immediately
access, usually by a mouse click or key press. It
is an easy-to-use and flexible format to
share information over the Internet.
▸ Markup languages use sets of markup tags to
characterize text elements within a
9
HTML (Hypertext Markup
Language)
▸ Tim Berners-Lee originally developed
HTML in 1990. He is also known as the
father of the web.
▸ In 1996, the World Wide Web Consortium
(W3C) became the authority to maintain
the HTML specifications. HTML also
became an international standard (ISO)
in 2000
▸ HTML5 is the latest version of HTML.
HTML5 provides a faster and more robust
10
Things you can do with
HTML
▸ You can publish documents online with
text, images, lists, tables, etc.
▸ You can access web resources such as
images, videos or other HTML document via
hyperlinks.
▸ You can create forms to collect user
inputs like name, e-mail address,
comments, etc.
▸ You can include images, videos, sound
clips, flash movies, applications and
11
Things you can do with
HTML
▸ You can create offline version of your
website that work without internet.
▸ You can store data in the user's web
browser and access later on.
▸ You can find the current location of your
website's visitor.
HTML Tags
CSCC 101 – Introduction to Computing
13

How to Code in HTML


▸ Here are the steps you need to follow:
1. Open your text editor (example:
Notepad)
2. Write some codes
3. Save HTML Page
▹ To save your output, use the extension
name (.html) file.
▹ Example: MyWebPage.html
14

Sample HTML Structure


15

Description of Tags
▸ The opening <html> tag indicates that
anything between it and a closing </html>
tag is HTML code.
▸ The <body> tag indicates that anything
between it and the closing </body> tag
shown inside the main browser window.
▸ Words between <h1> and </h1> are a
main heading.
▸ A paragraph of text appears between these
<p> and </p> tags.
16

Description of Tags
▸ Here is another paragraph between opening
<p> and closing </p> tags.
▸ Another paragraph inside <p> and </p>
tags.
▸ Another sub-heading inside <h2> and
</h2> tags.
▸ The closing </body> tag indicates the end
of what should appear in the main browser
window.
▸ The closing </html> tag indicates that it is
17

HTML Element Syntax


▸ An HTML element is an individual component of an
HTML document. It represents semantics, or meaning.
For example, the title element represents the title of
the document.
▸ Most HTML elements are written with a start tag (or
opening tag) and an end tag (or closing tag), with
content in between. Elements can also contain
attributes that defines its additional properties. For
example, a paragraph, which is represented by
the p element, would be written as:
18

HTML Tags vs Elements


▸ Technically, an HTML element is the
collection of start tag, its attributes, an
end tag and everything in between.
▸ On the other hand, an HTML tag (either
opening or closing) is used to mark the start
or end of an element
▸ However, in common usage the terms HTML
element and HTML tag are interchangeable.
For simplicity's sake of this website, the
terms "tag" and "element" are used to
19
Case Insensitivity in HTML Tags
and Attributes
▸ In HTML, tag and attribute names are not
case-sensitive (but most attribute values are
case-sensitive). It means the tag <P>, and
the tag <p> defines the same thing in HTML
which is a paragraph.
20

Nesting HTML Elements


▸ Most HTML elements can contain any
number of further elements (except empty
elements), which are, in turn, made up of
tags, attributes, and content or other
elements.
21

Writing Comments in HTML


▸ Comments are usually added with the purpose of
making the source code easier to understand. It may
help other developer (or you in the future when you
edit the source code) to understand what you were
trying to do with the HTML. Comments are not
displayed in the browser.
▸ An HTML comment begins with <!--, and ends with --
>, as shown in the example below
Basic HTML
Elements
CSCC 101 – Introduction to Computing
23

Basic HTML Elements


1. HTML Headings
2. HTML Paragraphs
3. HTML Link Syntax
4. Formatting Text with HTML
5. HTML Styles
6. HTML Images
24

HTML Headings
▸ HTML headings provide valuable information by
highlighting important topics and the structure of the
document, so optimize them carefully to improve user
engagement.
▸ Don't use headings to make your text look BIG or
bold. Use them only for highlighting the heading of
your document and to show the document structure.
▸ Since search engines, such as Google, use headings
to index the structure and content of the web pages
so use them very wisely in your webpage.
▸ Use the <h1> headings as main headings of your
web page, followed by the <h2> headings, then the
25

HTML Headings
26

HTML Paragraphs
▸ Paragraph element is used to publish text on the web
pages.
▸ Paragraphs are defined with the <p> tag. Paragraph
tag is a very basic and typically the first tag you will
need to publish your text on the web pages. Here's an
example:
27

Creating Line Breaks


▸ The <br> tag is used to insert a line break on the
web page.
▸ Since the <br> is an empty element, there is no need
of corresponding </br> tag,
28

Creating Horizontal Rules


▸ You can use the <hr> tag to create horizontal
rules or lines to visually separate content
sections on a web page. Like <br>, the <hr> tag
is also an empty element.
29

Defining Preformatted Text


▸ Sometimes, using &nbsp;, <br>, etc. for
managing spaces isn't very convenient.
Alternatively, you can use the <pre> tag to
display spaces, tabs, line breaks, etc. exactly as
written in the HTML file. It is very helpful in
presenting text where spaces and line breaks are
important like poem or code
30

Formatting Text with HTML


▸ HTML provides several tags that you can use to make
some text on your web pages to appear differently
than normal text. For example, you can use the tag
<b> to make the text bold, tag <i> to make the text
italic, tag <mark> to highlight the text, tag <code>
to display a fragment of computer code, tags <ins>
and <del> for marking editorial insertions and
deletions, and more.
31

Aligning Text with HTML


▸ The align Attribute in HTML is used to specify the
alignment of text content of The Element. this
attribute is used in all elements. The Align attribute
can also be set using CSS property "text-align: " or in
<img> "vertical-align: ".
Syntax:

<element_name align="left | right | center |


justify">
Attribute Values:
32

Aligning Text with HTML


left: It sets the text left-align.
right: It sets the text right-align.
center: It sets the text center-align.
justify: It stretches the text of a paragraph to set the
width of all lines equal.
33

HTML Styles
▸ Style information can either be attached as a
separate document or embedded in the HTML
document itself. There are the three methods of
implementing styling information to an HTML
doacument:
1. Inline styles — Using the style attribute in
the HTML start tag
34

HTML Styles
2. Embedded style — Using the <style>
element in the head section of the
document
35

HTML Styles
3. External style sheet — Using the <link>
element, pointing to an external CSS files
36

HTML Images
▸ Images enhance visual appearance of the web pages
by making them more interesting and colorful.
▸ The <img> tag is used to insert images in the HTML
documents. It is an empty element and contains
attributes only. The syntax of the <img> tag can be
given with: <img src="url" alt="some_text">
37

Advanced HTML Elements


1. HTML Tables
2. HTML Lists
3. HTML Forms
4. HTML Frame
38

HTML Tables
▸ HTML table allows you to arrange data into rows
and columns. They are commonly used to display
tabular data like product listings, customer's
details, financial reports, and so on
Web
Development:
The Basics of
HTML
--- END OF DISCUSSION ---
40

THANKS!
Any questions?

You might also like