web design basics 1
DESCRIPTION
WebSite design basicsTRANSCRIPT
![Page 1: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/1.jpg)
MS Alam TRIVUz
CEO, Shabaka Soft Ltd.
Class # 02
TRIVUz Academy
WebSite Development
Web Design - 1
![Page 2: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/2.jpg)
What to do?
![Page 3: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/3.jpg)
Before we Start
Web Design Basics
Session # 01
Web Server (Hosting)
Web Pages(Web Site)
FTP
File Transfer Protocol
Have a look, figure out which part we are going to do first.
![Page 4: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/4.jpg)
Before we Start
Web Design Basics
Session # 01
Web Server (Hosting)
Web Pages(Web Site)
FTP
File Transfer Protocol
Have a look, figure out which part we are going to do first.
1. Create our first web Document called Webpage
![Page 5: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/5.jpg)
Define Task
Web Design Basics
Session # 01
1. Create our first web Document
called Webpage
2. Upload our page to webserver
3. Browse our site using any web
browser
![Page 6: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/6.jpg)
Tools & LanguageCreating Web
Page
Web Design - 1
1. A Text Editor, maybe notepad
2. Basic Knowledge of HTML
![Page 7: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/7.jpg)
What is HTML?
HTML
Web Design - 1
![Page 8: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/8.jpg)
IntroductionHTML
• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a
markup language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages
- w3schools.com
Web Design - 1
![Page 9: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/9.jpg)
HTML TagsHTML• HTML markup tags are usually called HTML tags
• HTML tags are keywords surrounded by ange
brackets like <html>
• HTML tags normally come in pairs like <b> and
</b>
• The first tag in a pair is the start tag, the
second tag is the end tag. It also known as
opening tags & closing tags.
- w3schools.com
Web Design - 1
![Page 10: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/10.jpg)
HTML Documents
HTML
• HTML documents describe web pages
• HTML documents contain HTML tags and plain
text
• HTML documents are also called web pages
• Web browser can read HTML documents and
display them as Web Pages.
- w3schools.com
Web Design - 1
![Page 11: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/11.jpg)
Our First HTML DocumentHTML
<html>
<body>
<h1>Our first Heading</h1>
<p>
This is our first paragraph in web page
created with HTML markup language
</p>
</body>
</html>
Web Design - 1
![Page 12: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/12.jpg)
Saving HTML DocumentHTML
To save HTML document follow the step
1. Click File > Save As
2. Name the file as index.html
3. Open the index.html with any web browser
- w3schools.com
Web Design - 1
![Page 13: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/13.jpg)
OutputHTML
![Page 14: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/14.jpg)
More HTML TagsHTML
Lets learn more HTML Tags
Bold Tag: <b>Text</b>
Italic Tag: <i>Text</i>
Underline Tag: <u>Text</u>
Paragraph Tag: <p>Text</p>
HTML Images: <img src=“path/image.jpg” />
Hyper Link: <a href=“file.html”>Link
Text</a>
Web Design - 1
![Page 15: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/15.jpg)
HTML ElementsHTML
Web Design - 1
An HTML element is everything from the start tag to the end tag:
Start Tag * Element content End tag *
<p> This is paragraph </p>
<a href=“index.html”>
This is a link </a>
<br />
![Page 16: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/16.jpg)
![Page 17: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/17.jpg)
![Page 18: Web design basics 1](https://reader033.vdocuments.net/reader033/viewer/2022061121/546f3da1af7959814b8b49f0/html5/thumbnails/18.jpg)
Thank You
MS Alam TRIVUz
Head of ResearchTRIVUz Network (IT Research Since 2003)
Lead Software EngineerRxRD Inc, Florida, USA
CEOShabaka Soft Ltd.
[email protected]+88 01712 084408