Scribd
Upload
7 views

Intro to HTML

The document provides an introduction to web development, outlining the roles of front-end, back-end, and full-stack developers, as well as the importance of HTML in creating web pages. It explains HTML elements, tags, and attributes, and discusses the use of web browsers to display HTML documents. Additionally, it includes steps for creating a web page using various text editors and outlines criteria for a personal website project.

Uploaded by

9f6qggbdkp
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

Intro to HTML

The document provides an introduction to web development, outlining the roles of front-end, back-end, and full-stack developers, as well as the importance of HTML in creating web pages. It explains HTML elements, tags, and attributes, and discusses the use of web browsers to display HTML documents. Additionally, it includes steps for creating a web page using various text editors and outlines criteria for a personal website project.

Uploaded by

9f6qggbdkp
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 34

Introductio

n to HTML
Web Developer
- is one of the most
interesting career paths for
it combines analytical and
technical skills with creative
design and development.
- Web developers work
with professionals in IT,
sales and marketing,
and other departments
to build websites that
attract and keep
customers, contributing
to a business’s sales
growth or a government
agency’s effectiveness.
- Web development roles:

- Front end - developers who specialize in


the user interface.

- Back end - those who write the


underlying code for running all website
operations.

- Full stack - those who manage all aspects


of a website.
Front-end web development
- is responsible for the look and feel of a website.
This means how colors, type, icons, and images
appear. Increasingly, front-end development has to
account for how a website looks on all devices,
from desktop to tablet to phone. Typical
programming languages include HTML, JavaScript,
and CSS. Front-end developers keep up with
cutting-edge trends in web design and
development to make sure websites are optimized
for users and search engines — and with security
best practices in mind.
Back-end web development
- is responsible for building and maintaining the
code that runs a website. This code connects the
website to the server and ensures that data flows
properly to the website and that transactions are
processed correctly. Typical programming
languages include Java (different from JavaScript),
PHP, and MySQL; newer tools include Python and
Golang. Back-end web developers can keep up
with changes in technology by participating in
networking communities that share coding tips
and support.
Full-stack web development

- covers both front-end and back-end responsibilities.


Depending on the complexity of a website, a full-stack
developer may be responsible for all facets of its
development, from the server side to the user interface.
Many full-stack developers may still specialize in one aspect
of web development, but their broad experience is useful in
troubleshooting or speeding up a build or redesign. Full-stack
developers are often responsible for identifying cutting-edge
technologies, such as enhanced programming languages (or
even no- or low-code trends) and blockchain, that can be
used to strengthen websites’ business capabilities.
HTML
- Stands for Hypertext Markup
Language
- Language interpreted by Web
browser
- Web pages are also called
HTML documents
- It defines the structure and
layout of a Web document by
using a variety of tags and
HTML
- Create a Web page using tags.
- Use graphics and display text in
different fonts, sizes and colors.
- Enhance the presentation of the
document using HTML elements.
- Create hyperlinks to navigate to
different documents present on the
Web.
- Display data on a tabular form.
- Create multiple windows in a Web
page to display information from
multiple sources in different windows
HTML Elements
and Tags
Types of HTML Tag-
Paired Tag
Types of HTML Tag-
Singular Tag
- A standalone tag does not have a
companion tag.

- Example:
- <BR/> - This tag will insert a line
break

- This tag does not require any


companion tag.
HTML Attributes
- A language construct that programmers use to add additional
information (i.e., metadata) to code elements (e.g., assemblies,
modules, members, types, return values, and parameters) to extend
their functionality.

- Attributes are written immediately following the tag.

- Multiple attributes can be associated.


Document
Document
Elements or Tags:
<html> - The main container for HTML pages

<head> - The container for page header


information

<title> - the title of the page

<body> - the main body of the page


DOCTYPE
The HTML !doctype tag is used for
specifying which version of HTML the
document is using. This is referred
to as the document type declaration
(DTD).
Element
Element
An HTML element is defined by a start tag, some content,
and an end tag.

<tagname> Content goes here…. </tagname>

Example:

<h1> My First Heading </h1>

<p> My first paragraph </p>


Web Browsers
The purpose of a Web browser (Chrome, Edge, Firefox,
Safari) is to read HTML documents and display them
correctly.
Element
• The <head> element is just a container
for all other header elements.

• It should be the first thing to appear after


the opening <html> tag.

• Each <head>element should contain a


<title> element indicating the title of the
document.
Element
• The <title> tag is used to give title to the
document.
• The <link> tag is used to link to an
external file, such as a style sheet or
JavaScript file.
• The <style> tag is used to include CSS
rules inside the document.
• The <script> tag is used to include
Element
• The <base> tag is used to create a“base”
url for all links on the page.
• The <object> tag is designed to include
images, JavaScript objects, Flash
Animations, MP3 files, QuickTime movies,
and other components of a page.
The <title> Element
The <title> Element
Here is the example of using title tag.
Element
Element
Here is the example of using body tag.
HTML Editors
Text Editor – is an app that allows you
to create, open, and edit text files on
your computer and Google drive.
Example:
Notepad Adobe Dreamweaver
CC
Notepad++ Visual Studio Code
Sublime Text
Steps to create web page
with notepad, Sublime (with
laptop/desktop)

0
0
Write some
HTML code
Open
Notepad
2
1
Open Start > Pro
grams >
Accessories
> Notepad
Steps to create web page

0 with notepad
Save the
HTML Page
0
3
Select File > View the HTML
Save > Name Page in your

4
the File
(Filename) .htm
browser
l extension
Steps to create web page
with notepad (with

0
cellular phone)
Open/
Install Text
0 Write some
HTML code

1
Editor
Example:
- WebMaster's HTML
Editor Lite
- Android Web
Developer (AWP)
2
- DroidEdit
- Quoda Code Editor
- Jota Text Editor
- Android Integrated
Development
Environment (AIDE)
- anWriter
Steps to create web page

0 with notepad
Save the
HTML Page
0
3
View the HTML Page
in your browser-Press

4
Run button
Activity 1
Create a simple Personal
website
- with a minimum of 5 web
pages.
- filename
(Lastname_Activity1)
RUBRICS
Criteria

1. SIMPLICITY (Refers to an approach to express something in complete 30%


and efficient way)
2. CONSISTENCY (The design must be consistent in the whole website. 20%
Each page must be predictable and look similar to each of the other web
pages in color, text, format, and or some family layout.
3. COLOR SCHEMES (Refers to a set of colors you use on your web 20%
components including, text background, link, visited link and others.
4. Structure/Navigation Format (Good website are well organized. 30%
Their content is presented in a clear manner that is easy to follow. You
should ensure that the readers get around your website. Block of text
must be in appropriate size.
END

You might also like