Scribd
Upload
6 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's features, elements, and structure, including tags and attributes, and discusses the use of web browsers and HTML editors. Additionally, it details the steps to create a web page using text editors like Notepad and various mobile applications.

Uploaded by

leddameriam21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 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's features, elements, and structure, including tags and attributes, and discusses the use of web browsers and HTML editors. Additionally, it details the steps to create a web page using text editors like Notepad and various mobile applications.

Uploaded by

leddameriam21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

Introduction 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
attributes.
Features of 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.


Structure of HTML Document
Structure of HTML 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).
The <html> Element
The <html> 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.
The <head> 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.
The <head> 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 JavaScript or
VBScript inside the document.
The <head> 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 .
The <body> Element
The <body> 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)

02
Write some HTML code

01
Open Notepad

Open Start > Programs


> Accessories > Notepad
Steps to create web page with notepad

03
Save the HTML Page

Select File > Save > Name


the File (Filename) .html
extension 04 View the HTML Page in
your browser
Steps to create web page with notepad
(with cellular phone)

02
Write some HTML code

01
Open/Install
Text Editor
Example:
- WebMaster's HTML Editor Lite
- Android Web Developer (AWP)
- DroidEdit
- Quoda Code Editor
- Jota Text Editor
- Android Integrated
Development Environment (AIDE)
- anWriter
Steps to create web page with notepad

03
Save the HTML Page

04 View the HTML Page in your


browser-Press Run button

You might also like