APEX INSTITUTE OF TECHNOLOGY
COMPUTER SCIENCE &
ENGINEERING
Bachelor of Engineering (All Branches) - Elective
Web Development Fundamentals
CSO-453
NIRMALYA BASU (E13248)
Chapter 1.1: About HTML DISCOVER . LEARN . EMPOWER
Web Development Fundamentals : Course Objective
1. The course will focus on HTML, CSS, JavaScript.
2. The course will focus on jQuery, libraries and different frameworks for frontend
development.
3. The course will focus on Server-Side Scripting languages, hosting of web pages and
concepts of digital marketing.
Web Development Fundamentals : Course Objective
CO1 Define a basic webpage terminology.
CO2 Illustrate the concepts of webpage creation tools and techniques.
CO3 Apply the basic building block of construction of any static and dynamic webpage.
CO4 Interpret the complexity of frontend and backend web development.
CO5 Plan to construct a website.
Outline
• Introduction to HTML 5
• The Anatomy of an HTML Tag
• How to Structure Text in HTML
• HTML Lists
• HTML Image Elements
• HTML Links and Anchor Tags
• HTML Tables
• How to Type Emojis
• HTML Forms
HTML: Historical Context
• HTML – Hypertext Markup Language
- A standard markup language is used for describing the structure of web pages.
- How the documents will be displayed on web pages is the main work of HTML.
• In 1989, a physicist Tim Berners-Lee invented HTML at CERN.
- Why? He wished to design a system for CERN researchers that eases the difficulties posed in
using and sharing documents.
- He proposed an Internet-based hypertext system and later specified HTML, browser. and server
software in late 1990.
• The first formal public description of HTML was announced in late 1991.
- Along with this, many other technologies like World Wide Web (WWW), Web Browser, and
Web server came into existence that assists in searching information.
• HTML versions : HTML 2, HTML 3, HTML 4 and HTML 5 (Latest 5.3)
Web Fundamental Terms
• World Wide Web (WWW or W3)
WWW commonly known as the Web, is an information system where documents and other web resources
are identified by Uniform Resource Locators (URL). Ex: [Link]
• Web Server
A web server is computer software and underlying hardware that accepts user requests using Hyper Text
Transfer Protocol (HTTP) and display web pages (.html files) or run websites.
• Web Browser
It is an application software for accessing the World
Wide Web. When a user requests a web page, the web
browser retrieves the necessary content from a web server and
then displays the html page on the user's device.
Introduction to HTML5
• HTML5 is a standard for structuring and presenting content on the World Wide Web.
• HTML is an acronym for Hypertext Markup Language.
Hyper Text: Hyper Text simply means "Text within Text“. It links two or more webpages.
Markup language: A language that is used to apply layout and formatting conventions to a text
document. It uses some key components like tags that makes text more interactive and dynamic.
• HTML file can be created using simple text editors like Notepad.
• Extension to save html file: .htm and .html.
• HTML Tags: HTML language main components are Tags that tell the browsers that how to
format the web page.
The Anatomy of a HTML Tag
• HTML Tags are keywords that instructs browser that how to display the content on web page.
• They help browsers in differentiating between HTML content and Simple content.
• General Syntax: Element
<tag_name> Content </tag_name>
Opening tag Closing tag
• Points to Remember
* All HTML tags must enclosed within < > these brackets and not case sensitive.
* If you have used an open tag <tag>, then you must use a close tag </tag> using slash symbol.
• Types of Tags : Paired and Unpaired Tags
* Paired : having separate opening and closing tags. Ex: <head>, <body>,<b> and many more.
* Unpaired : having opening and closing in single tag. Ex: <br>,<hr>.
We will study in detail about these tags in next slides.
• Attribute : An attribute provides more information about the element, and it is applied within the
start tag.
• An HTML attribute contains two fields: name & value.
• Syntax
<tag name attribute_name= " attr_value"> content </ tag name>
Attribute Output
Basic Structure of HTML Code
• An HTML Document is mainly divided into two parts:
HEAD: This section contains information about the HTML document like Page title, HTML version, Meta Data etc.
BODY: This contains the content which will be displayed on the Web Page.
• Basic Structure of HTML code
<!DOCTYPE html> <!DOCTYPE html>: This tag is used to
<html> tells the HTML version that is HTML 5.
<head> <html>: This is called HTML root element
Head Section and used to wrap all the code.
<title> My first page </title>
</head> <head>: Head tag contains metadata,
title, page CSS etc.
<body> <body>: This tag is used to enclose all
<p> Content of Web page </p> Body Section the data which will be shown on a web
<b> Welcome to CU </b> page in the browser.
</body>
</html>
Example of HTML
Title of the page
Body section URL
Paragraph text Bold text
THANK
YOU
For Queries,
Write at : nirmalya.E13248@[Link]