SlideShare a Scribd company logo
1 of 23
Download to read offline
Fundamentals of Web designing
Ministry of Higher Education
Bamyan University
Computer Science Department
1
Presented by : Mustafa Kamel Mohammadi
Email : bamian.cs@gmail.com
HTML (Hypertext Markup Language) introduction
learning objective
 In this chapter you will learn
 What is HTML?
 Structure of n HTML document
2
What is hypertext?
• Web pages can contain many kinds of content, such as text, graphics, forms,
audio and video files, and interactive games.
• HTML is the cement that holds a Web page together.
• HTML files that produce Web pages are just text documents.
• But Web pages aren’t merely text documents. They’re made with a special kind
of text called HTML.
• HTML is a collection of instructions that specifies how your page should look and
behave.
• Special instructions in HTML permit text to point (link) to something else. Such
pointers are called hyperlinks.
• Hyperlinks are the glue that holds the World Wide Web together. In your Web
browser
3
Markup?
• Web browsers were created to read HTML instructions (known as markup) and
display the resulting Web page.
• Markup lives in a text file (with your content) to give orders to a browser.
4
So what is HTML ?
HTML is a hypertext markup language!
5
Syntax and rules
• HTML markups are made of three types of components
• Elements
• Attributes
• Entities
• Every markup may be made of a combination of these components
6
HTML Element
• Is the building block of HTML pages
• Elements are made of
• Tags
• Content in the tags
• Two types of elements are identified
• Element that have content and are made of a pair of tags
• Element that inserts an object and made of a single tag
7
Pair tag elements
• Elements that describe content use a tag pair to mark the beginning and the end
of the element, Start and end tag.
• <tag>...</tag>
• Contents such as paragraphs, headings, tables and lists always uses a tag pair
• The start tag (<tag>) tells the browser, “The element begins here.”
• The end tag (</tag>) tells the browser, “The element ends here.”
• The actual content is what occurs between the start tag and end tag.
• <p> this is a paragraph </p>
8
Single tags
• Elements that insert something into the page are called empty elements
• <tag />
• Images and line breaks insert something into the HTML file, so they use one tag.
<img
src=”red_grapes.jpg” width=”75” height=”100” alt=”Red Grapes”
align=”middle” hspace=”5”
/>
9
Nesting elements
• Many page structures combine nested elements
<ul>
<li>Barbera</li>
<li>Brunello</li>
</ul>
10
Attributes
• Attributes allow variety in how an element describes content or works
• You include attributes within the start tag of the element you want them with,
after the element name but before the ending sign, like this:
<tag attribute=”value” attribute=”value”>
• Attribute values must be enclosed in quotation marks
• Every element has its own set of applicable attributes
• Some attributes are globally applied on all elements
11
Entities
• Entities are special characters that you can display on your Web page.
• It include some special characters, such as trademark symbols, fractions, and
accented characters.
• The ampersand character (&) instructs the browser that the following stream are
character entity.
• Ex:
• &lt = less than character
• &gt = greater than
• &copy = copyright sign
12
Before getting started!
• Creating HTML documents differs from creating word-processor documents in an
application like Microsoft Word because you use two applications:
• You create the Web pages in your text or HTML editor.
• You view the results in your Web browser.
13
Creating a Page from Scratch
• Using HTML to create a Web page from scratch involves four straightforward
steps:
1. Plan your page design.
2. Combine HTML and text in a text editor to make that design a reality.
3. Save your page.
a. Save your page as .html or .htm file extensions
4. View your page in a Web browser.
14
HTML page structure
• every properly constructed HTML page needs the same basic document
structure that includes
• A statement that identifies the type of HTML document called DOCTYPE
• A document header
• A document body
15
HTML DOCTYPE
• At the top of your HTML document should be the Document Type Declaration or
DOCTYPE declaration.
• Relevant HTML DOCTYPE
• HTML 4.01
• XHTML 1.0
• HTML 5
• HTML 5 is the newest version of HTML that almost all browsers support this
• <!DOCTYPE html> is the syntax of HTML 5 doctype declaration
16
Html tag
• After you specify which version of (X)HTML the document follows, add an <html>
element to hold all the other (X)HTML elements in your page.
<!DOCTYPE html>
<html>
// all other elements of html goes here
</html>
17
Header of web page
• Inserted in HTML tag.
• Is one of the two main components of HTML document
• Provides basic info about page
• Adding title
• Adding meta data
• Keywords
• Author info
• Description
• Adding style sheet
18
Cont.
• Adding title
• Adding description
<!DOCTYPE html>
<html
<head>
<title>Bamyan IT Consulting Service</title>
<meta name=”keywords” content=”IT consulting, MCSE, networking” />
<meta name=”description” content=”An overview of Bamyan Service company services” />
</head>
</html>
• Content of meta tag do not affect page appearance
19
Body tag
• The <body> element holds the content of your document.
• Every thing that you want to show come in body tag
<HTML>
<head>
</head>
<body>
</body>
</HTML>
20
Posting Your Page Online
1. Find a Web hosting provider to hold your Web pages.
2. Use an FTP client or a Web browser to make a connection to your Web server.
3. Copy the HTML file from your hard drive to the Web server.
4. Use your Web browser to view the file via the Internet.
21
22
References
• “HTML 4 dummies 5th edition” by Ed Tittel & Mary Burmeister
• “HTML 5 designing rich internet applications” by Mathew Dawid
• “HTML in ten simple steps” by Robert G. fuller
23

More Related Content

What's hot

Creating WebPages using HTML
Creating WebPages using HTMLCreating WebPages using HTML
Creating WebPages using HTMLMohammad Arshad
 
How to create basic webpage
How to create basic webpageHow to create basic webpage
How to create basic webpageJames Erro
 
Web designing using html
Web designing using htmlWeb designing using html
Web designing using htmljulicris021488
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLyht4ever
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introductionc525600
 
Html introduction by ikram niaz
Html introduction by ikram niazHtml introduction by ikram niaz
Html introduction by ikram niazikram niaz
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLAmeer Khan
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.Beqa Chacha
 
basic introduction of html tags
basic introduction  of html tagsbasic introduction  of html tags
basic introduction of html tagsManish jariyal
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markertersSEO SKills
 
Web Page Designing
Web Page DesigningWeb Page Designing
Web Page DesigningAmit Mali
 

What's hot (19)

Creating WebPages using HTML
Creating WebPages using HTMLCreating WebPages using HTML
Creating WebPages using HTML
 
How to create basic webpage
How to create basic webpageHow to create basic webpage
How to create basic webpage
 
Web designing using html
Web designing using htmlWeb designing using html
Web designing using html
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
1. HTML
1. HTML1. HTML
1. HTML
 
Html introduction by ikram niaz
Html introduction by ikram niazHtml introduction by ikram niaz
Html introduction by ikram niaz
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Basics of HTML
Basics of HTMLBasics of HTML
Basics of HTML
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Html 5
Html 5Html 5
Html 5
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
 
basic introduction of html tags
basic introduction  of html tagsbasic introduction  of html tags
basic introduction of html tags
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markerters
 
Introduction to WEB HTML, CSS
Introduction to WEB HTML, CSSIntroduction to WEB HTML, CSS
Introduction to WEB HTML, CSS
 
Web Page Designing
Web Page DesigningWeb Page Designing
Web Page Designing
 
Html 5
Html 5Html 5
Html 5
 
HTML
HTMLHTML
HTML
 
Html basic
Html basicHtml basic
Html basic
 

Viewers also liked

Viewers also liked (9)

C Programming Language Tutorial for beginners - JavaTpoint
C Programming Language Tutorial for beginners - JavaTpointC Programming Language Tutorial for beginners - JavaTpoint
C Programming Language Tutorial for beginners - JavaTpoint
 
Basic of web design
Basic of web designBasic of web design
Basic of web design
 
Overview of c language
Overview of c languageOverview of c language
Overview of c language
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
C notes.pdf
C notes.pdfC notes.pdf
C notes.pdf
 
C language ppt
C language pptC language ppt
C language ppt
 
Basics of C programming
Basics of C programmingBasics of C programming
Basics of C programming
 
Introduction to C Programming
Introduction to C ProgrammingIntroduction to C Programming
Introduction to C Programming
 
INTRODUCTION TO C PROGRAMMING
INTRODUCTION TO C PROGRAMMINGINTRODUCTION TO C PROGRAMMING
INTRODUCTION TO C PROGRAMMING
 

Similar to Web design - HTML (Hypertext Markup Language) introduction

Similar to Web design - HTML (Hypertext Markup Language) introduction (20)

Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
 
INTRODUCTION TO HTML.pptx
INTRODUCTION TO HTML.pptxINTRODUCTION TO HTML.pptx
INTRODUCTION TO HTML.pptx
 
Web Development - Lecture 2
Web Development - Lecture 2Web Development - Lecture 2
Web Development - Lecture 2
 
Html5.pptx
Html5.pptxHtml5.pptx
Html5.pptx
 
Html (hypertext markup language)
Html (hypertext markup language)Html (hypertext markup language)
Html (hypertext markup language)
 
Html
HtmlHtml
Html
 
BITM3730Week1.pptx
BITM3730Week1.pptxBITM3730Week1.pptx
BITM3730Week1.pptx
 
The Complete HTML
The Complete HTMLThe Complete HTML
The Complete HTML
 
Class1slides
Class1slidesClass1slides
Class1slides
 
Computer fundamentals-internet p2
Computer fundamentals-internet p2Computer fundamentals-internet p2
Computer fundamentals-internet p2
 
Html
HtmlHtml
Html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html5
Html5 Html5
Html5
 
Html
HtmlHtml
Html
 
Web design using html
Web design using htmlWeb design using html
Web design using html
 
CreatingWebPages-Part1.ppt
CreatingWebPages-Part1.pptCreatingWebPages-Part1.ppt
CreatingWebPages-Part1.ppt
 
HTML Comprehensive Overview
HTML Comprehensive OverviewHTML Comprehensive Overview
HTML Comprehensive Overview
 

More from Mustafa Kamel Mohammadi

Web design - Working with tables in HTML
Web design - Working with tables in HTMLWeb design - Working with tables in HTML
Web design - Working with tables in HTMLMustafa Kamel Mohammadi
 
Web design - Working with Links and Images
Web design - Working with Links and ImagesWeb design - Working with Links and Images
Web design - Working with Links and ImagesMustafa Kamel Mohammadi
 
Web design - Working with Text and Lists in HTML
Web design - Working with Text and Lists in HTMLWeb design - Working with Text and Lists in HTML
Web design - Working with Text and Lists in HTMLMustafa Kamel Mohammadi
 
Web design - Applications and web application definition
Web design - Applications and web application definitionWeb design - Applications and web application definition
Web design - Applications and web application definitionMustafa Kamel Mohammadi
 
Fundamentals of database system - Data Modeling Using the Entity-Relationshi...
Fundamentals of database system  - Data Modeling Using the Entity-Relationshi...Fundamentals of database system  - Data Modeling Using the Entity-Relationshi...
Fundamentals of database system - Data Modeling Using the Entity-Relationshi...Mustafa Kamel Mohammadi
 
Fundamentals of database system - Relational data model and relational datab...
Fundamentals of database system  - Relational data model and relational datab...Fundamentals of database system  - Relational data model and relational datab...
Fundamentals of database system - Relational data model and relational datab...Mustafa Kamel Mohammadi
 
Fundamentals of database system - Database System Concepts and Architecture
Fundamentals of database system - Database System Concepts and ArchitectureFundamentals of database system - Database System Concepts and Architecture
Fundamentals of database system - Database System Concepts and ArchitectureMustafa Kamel Mohammadi
 
Fundamentals of Database system - Databases and Database Users
Fundamentals of Database system - Databases and Database UsersFundamentals of Database system - Databases and Database Users
Fundamentals of Database system - Databases and Database UsersMustafa Kamel Mohammadi
 

More from Mustafa Kamel Mohammadi (10)

Web design - Working with forms in HTML
Web design - Working with forms in HTMLWeb design - Working with forms in HTML
Web design - Working with forms in HTML
 
Web design - Working with tables in HTML
Web design - Working with tables in HTMLWeb design - Working with tables in HTML
Web design - Working with tables in HTML
 
Web design - Working with Links and Images
Web design - Working with Links and ImagesWeb design - Working with Links and Images
Web design - Working with Links and Images
 
Web design - Working with Text and Lists in HTML
Web design - Working with Text and Lists in HTMLWeb design - Working with Text and Lists in HTML
Web design - Working with Text and Lists in HTML
 
Web design - How the Web works?
Web design - How the Web works?Web design - How the Web works?
Web design - How the Web works?
 
Web design - Applications and web application definition
Web design - Applications and web application definitionWeb design - Applications and web application definition
Web design - Applications and web application definition
 
Fundamentals of database system - Data Modeling Using the Entity-Relationshi...
Fundamentals of database system  - Data Modeling Using the Entity-Relationshi...Fundamentals of database system  - Data Modeling Using the Entity-Relationshi...
Fundamentals of database system - Data Modeling Using the Entity-Relationshi...
 
Fundamentals of database system - Relational data model and relational datab...
Fundamentals of database system  - Relational data model and relational datab...Fundamentals of database system  - Relational data model and relational datab...
Fundamentals of database system - Relational data model and relational datab...
 
Fundamentals of database system - Database System Concepts and Architecture
Fundamentals of database system - Database System Concepts and ArchitectureFundamentals of database system - Database System Concepts and Architecture
Fundamentals of database system - Database System Concepts and Architecture
 
Fundamentals of Database system - Databases and Database Users
Fundamentals of Database system - Databases and Database UsersFundamentals of Database system - Databases and Database Users
Fundamentals of Database system - Databases and Database Users
 

Recently uploaded

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 

Recently uploaded (20)

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 

Web design - HTML (Hypertext Markup Language) introduction

  • 1. Fundamentals of Web designing Ministry of Higher Education Bamyan University Computer Science Department 1 Presented by : Mustafa Kamel Mohammadi Email : bamian.cs@gmail.com HTML (Hypertext Markup Language) introduction
  • 2. learning objective  In this chapter you will learn  What is HTML?  Structure of n HTML document 2
  • 3. What is hypertext? • Web pages can contain many kinds of content, such as text, graphics, forms, audio and video files, and interactive games. • HTML is the cement that holds a Web page together. • HTML files that produce Web pages are just text documents. • But Web pages aren’t merely text documents. They’re made with a special kind of text called HTML. • HTML is a collection of instructions that specifies how your page should look and behave. • Special instructions in HTML permit text to point (link) to something else. Such pointers are called hyperlinks. • Hyperlinks are the glue that holds the World Wide Web together. In your Web browser 3
  • 4. Markup? • Web browsers were created to read HTML instructions (known as markup) and display the resulting Web page. • Markup lives in a text file (with your content) to give orders to a browser. 4
  • 5. So what is HTML ? HTML is a hypertext markup language! 5
  • 6. Syntax and rules • HTML markups are made of three types of components • Elements • Attributes • Entities • Every markup may be made of a combination of these components 6
  • 7. HTML Element • Is the building block of HTML pages • Elements are made of • Tags • Content in the tags • Two types of elements are identified • Element that have content and are made of a pair of tags • Element that inserts an object and made of a single tag 7
  • 8. Pair tag elements • Elements that describe content use a tag pair to mark the beginning and the end of the element, Start and end tag. • <tag>...</tag> • Contents such as paragraphs, headings, tables and lists always uses a tag pair • The start tag (<tag>) tells the browser, “The element begins here.” • The end tag (</tag>) tells the browser, “The element ends here.” • The actual content is what occurs between the start tag and end tag. • <p> this is a paragraph </p> 8
  • 9. Single tags • Elements that insert something into the page are called empty elements • <tag /> • Images and line breaks insert something into the HTML file, so they use one tag. <img src=”red_grapes.jpg” width=”75” height=”100” alt=”Red Grapes” align=”middle” hspace=”5” /> 9
  • 10. Nesting elements • Many page structures combine nested elements <ul> <li>Barbera</li> <li>Brunello</li> </ul> 10
  • 11. Attributes • Attributes allow variety in how an element describes content or works • You include attributes within the start tag of the element you want them with, after the element name but before the ending sign, like this: <tag attribute=”value” attribute=”value”> • Attribute values must be enclosed in quotation marks • Every element has its own set of applicable attributes • Some attributes are globally applied on all elements 11
  • 12. Entities • Entities are special characters that you can display on your Web page. • It include some special characters, such as trademark symbols, fractions, and accented characters. • The ampersand character (&) instructs the browser that the following stream are character entity. • Ex: • &lt = less than character • &gt = greater than • &copy = copyright sign 12
  • 13. Before getting started! • Creating HTML documents differs from creating word-processor documents in an application like Microsoft Word because you use two applications: • You create the Web pages in your text or HTML editor. • You view the results in your Web browser. 13
  • 14. Creating a Page from Scratch • Using HTML to create a Web page from scratch involves four straightforward steps: 1. Plan your page design. 2. Combine HTML and text in a text editor to make that design a reality. 3. Save your page. a. Save your page as .html or .htm file extensions 4. View your page in a Web browser. 14
  • 15. HTML page structure • every properly constructed HTML page needs the same basic document structure that includes • A statement that identifies the type of HTML document called DOCTYPE • A document header • A document body 15
  • 16. HTML DOCTYPE • At the top of your HTML document should be the Document Type Declaration or DOCTYPE declaration. • Relevant HTML DOCTYPE • HTML 4.01 • XHTML 1.0 • HTML 5 • HTML 5 is the newest version of HTML that almost all browsers support this • <!DOCTYPE html> is the syntax of HTML 5 doctype declaration 16
  • 17. Html tag • After you specify which version of (X)HTML the document follows, add an <html> element to hold all the other (X)HTML elements in your page. <!DOCTYPE html> <html> // all other elements of html goes here </html> 17
  • 18. Header of web page • Inserted in HTML tag. • Is one of the two main components of HTML document • Provides basic info about page • Adding title • Adding meta data • Keywords • Author info • Description • Adding style sheet 18
  • 19. Cont. • Adding title • Adding description <!DOCTYPE html> <html <head> <title>Bamyan IT Consulting Service</title> <meta name=”keywords” content=”IT consulting, MCSE, networking” /> <meta name=”description” content=”An overview of Bamyan Service company services” /> </head> </html> • Content of meta tag do not affect page appearance 19
  • 20. Body tag • The <body> element holds the content of your document. • Every thing that you want to show come in body tag <HTML> <head> </head> <body> </body> </HTML> 20
  • 21. Posting Your Page Online 1. Find a Web hosting provider to hold your Web pages. 2. Use an FTP client or a Web browser to make a connection to your Web server. 3. Copy the HTML file from your hard drive to the Web server. 4. Use your Web browser to view the file via the Internet. 21
  • 22. 22
  • 23. References • “HTML 4 dummies 5th edition” by Ed Tittel & Mary Burmeister • “HTML 5 designing rich internet applications” by Mathew Dawid • “HTML in ten simple steps” by Robert G. fuller 23