Scribd
Upload
35 views

HTML CSS

htmlcss

Uploaded by

drsm sdar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
35 views

HTML CSS

htmlcss

Uploaded by

drsm sdar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 73

What is a Website?

A website is a collection of web pages and


related content that is identified by a common
domain name and published on at least
one web server.

Web advertising is any form of Internet-based


marketing.

Nowadays, websites become the tools or


services for people in our working environments
due to the digital transformation.

1
Why we should use?

First impression as a Information Exchange


Online Presence 24/7
real business Easily

Use anytime,
Market Expansion Advertising
anywhere, any devices

2
Basic Website Language

HTML CSS

• HTML stands for Hyper Text • CSS stands for Cascading Style
Markup Language, which is the Sheet, which is used to design
most widely used language on the web page to be more
Web to develop web pages. attractive.

3
Required Software Installation
To create website application, some software are needed.

The most popular Editor is Dreamweaver and others are Notepad, Notepad++,
Sublime Text, VSCode and so on.

Photoshop (pixel) and Illustrator (vector) are widely used to create design and
sometime Paint, FormatFactory application are used to design logo or images.

Sublime Text 4, XAMPP, Photoshop are choose


to develop the web site.

4
Copy code with color
Ctrl + Shift + P
Install Package

Ctrl + Shift + P
Highlight

5
Ctrl + C and Ctrl + Alt + V

6
Procedure
1. Create a folder “coffeehouse” on your Computer Desktop
2. Open sublime text
3. Save untitled file as a index.html in the coffeehouse folder
4. Type <ht and Enter

7
8

HTML : Structure and Text


<!DOCTYPE HTML>
<html> Opening tag <title>
The contents of the <title>
<head> element are either shown
<title>My First HTML Page</title> in the top of the browser,
above where you usually
</head> type in the URL of the
page you want to visit, or
<body> on the tab for that page (if
<p>This is some text...</p> your
browser uses tabs to allow
</body> you to view multiple pages
at the same time).
</html> Closing tag
An HTML element consists of an opening tag, a closing tag and the content inside.
In sublime Alt + Shift + 2
HTML Page: Header
HTML
<!DOCTYPE HTML>
<html>
header <head>
Before the <body> element you
<head> will often see a <head> element.
<title>My First HTML Page</title> This contains information
about the page (rather than
</head> information that is shown within
<body> the main part of the browser
window that is highlighted in
<p>This is some text...</p> blue on the opposite page). You
</body> will usually find a <title>
element inside the <head>
</html> element.

9
HTML Page: Body
<body> <!DOCTYPE HTML>
You met the <body> element <html>
in the first example we <head>
created.
Everything inside this <title>My First HTML Page</title>
element is shown inside the </head>
main browser window.
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
10
Save as index.html
Create a folder on your desktop “coffeehouse”
Open Sublime Text
Go to File Tab  New File 
Save as “index.html” and write code <ht.

11
Test and Result
1. To test the webpage, Select the index.html in the
Coffeehouse folder
2. And press Right click and choose Open with Chrome.

12
13

HTML Text: Headings


HTML has six "levels" of headings:
<h1> is used for main headings
<h2> is used for subheadings

<h1>This is a Main Heading</h1>


<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
Heading <h1> to <h6>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

14
15

HTML Text: Paragraphs


<p> This is a paragraph </p>
To create a paragraph, surround the words that make up the paragraph with an opening <p> tag
and closing </p> tag.

By default, a browser will show each paragraph on a new line with some space between it and
any subsequent paragraphs.
16

HTML Text Formatting

Code Definition

<b></b> bold

<i></i> italicized

<u></u> underlined

<sup></sup> Samplesuperscript

<sub></sub> Samplesubscript
Paragraph <p>
<p>This is a paragraph.</p> <blockquote>This is a block quote. In this chapter we
will show some basic HTML examples. Don't worry
<p>This is a <b>Bold</b> paragraph.</p>
if we use tags you have not learned about yet.In this
<p>This is a <i>Itallic</i> paragraph.</p> chapter we will show some basic HTML examples.
Don't worry if we use tags you have not learned
<p>This is a <sup>Super</sup>paragraph.</p> about yet.In this chapter we will show some basic
<p>This is a <sub>Sub</sub> paragraph.</p> HTML examples.on't worry if we use tags you have
not learned about yet.</blockquote>
<p>This is a paragraph.</p>
<q>In this chapter we will show some basic HTML
<p>This is <em>EM</em> a paragraph.</p> examples. Don't worry if we use tags you have not
<p>This is <strong>Strong</strong> a paragraph.</p> learned about yet.</q>

<p>This is <small>Small</small> a paragraph.</p> <address>No.(1), Main Road, Tarmwe Township,


Yangon</address>
<p>This is <ins>Insert</ins> a paragraph.</p>
<p><cite></cite> He is a <acronym
<p>This is a <del>Delete</del> paragraph.</p> title="Professor">Prof</acronym> JOhn</p>
<p>This is a <s>Strike</s> paragraph.</p> <abbr title="Hyper Text Markup
<p>This is a <mark>Mark</mark> paragraph.</p> Language">HTML</abbr>
17
HTML: Lists
<ol> <dl>
The definition list is created with the <dl>
The ordered list is created with the <ol> element. element and usually consists of a series of terms
and their definitions. Inside the <dl> element
<ul> you will usually see pairs of <dt> and <dd>
elements.

<dt>
The unordered list is created with the <ul>
element.

<li> This is used to contain the term being defined


(the definition term).
Each item in the list is placed between an opening
<li> tag and a closing </li> tag. (The li stands for
list item.)
<dd>
This is used to contain the definition.
18
19

Ordered Lists: <ol> Tag


Create an Order List using <ol></ol>: <ol type="1">
<li>Apple</li>
Attribute values for type are 1, A, a, I, or i <li>Orange</li>
<li>Grapefruit</li>
</ol>

1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
20

Unordered Lists: <ul> Tag


Create an Unorder List using <ul></ul>: <ul type="disk">
<li>Apple</li>
Attribute values for type are:
<li>Orange</li>
◦ disc, circle or square <li>Grapefruit</li>
</ul>

• Apple o Apple  Apple


• Orange o Orange  Orange
• Pear o Pear  Pear
21

Definition lists: <dl> tag


Create definition lists using <dl>

Pairs of text and associated definition; text is in <dt> tag, definition in <dd> tag

<dl>
<dt>HTML</dt>
<dd>A markup language. </dd>
<dt>CSS</dt>
<dd>Language used to style the web
page. </dd>
</dl>
List (Unorder list)
<ul> <ul type="circle">
<li>Apple</li> <li>Apple</li>
<li>Mango</li> <li>Mango</li>
<li>Orange</li> <li>Orange</li>
</ul>
</ul>

<ul type="square">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>
22
List (Order List)
<ol> <ol type="A">
<li>Apple</li> <li>Apple</li>
<li>Mango</li> <li>Mango</li>
<li>Orange</li> <li>Orange</li>
</ol> </ol>

<ol start="4"> <ol type="a">


<li>Apple</li> <li>Apple</li>
<li>Mango</li> <li>Mango</li>
<li>Orange</li> <li>Orange</li>
</ol> </ol>

23
List (Order List)
<ol type="I">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ol>

<ol type="i">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ol>

24
List (Definition List)
<dl>
<dt>HTML</dt>
<dd>This is HTML lists allow web
developers to group a set of related items in
lists.</dd>
</dl>

25
Link
1. Link to Top (ID)
2. Link to Pages (Same folder, Child folder, Parents folder and so on)
3. Link to other website
4. Link to other website with new tab
5. Link to email

26
Link to Pages
1. File  New file
2. Save untitle file as about.html in the coffeehouse folder (same folder with
index.html)
3. Type <ht and Enter
4. Type About using <h1> in the title code

index.html about.html

<a href="index.html">Home</a> <a href="index.html">Home</a>


<a href="about.html">About</a> <a href="about.html">About</a>

27
Link to Pages
1. Create a new folder “admin” in the coffeehouse folder (child folder of coffeehouse)
2. File  New file
3. Save untitled file as login.html in the coffeehouse folder
4. Type <ht and Enter
5. Type Login using <h1> in the title code
index.html about.html login.html

<a <a <a


href="index.html">Home</a> href="index.html">Home</a> href="../index.html">Home</a>
<a <a <a
href="about.html">About</a> href="about.html">About</a> href="../about.html">About</a
<a <a >
href="admin/login.html">Login href="admin/login.html">Login <a 28
</a> </a> href="login.html">Login</a>
Link to Pages
1. Create a new folder “cpaenl” in the coffeehouse folder (grandchild of coffeehouse)
2. File  New file, Save untitled file as product.html in the coffeehouse folder and
Type <ht and Enter, Type Product using <h1> in the title code
index.html about.html login.html product.html

<a <a <a <a


href="index.html">Home href="index.html">Home href="../index.html">Ho href="../../index.html">H
</a> </a> me</a> ome</a>
<a <a <a <a
href="about.html">Abou href="about.html">Abou href="../about.html">Ab href="../../about.html">A
t</a> t</a> out</a> bout</a>
<a <a <a <a
href="admin/login.html" href="admin/login.html" href="login.html">Login href="../login.html">Logi
>Login</a> >Login</a> </a> n</a>
<a <a <a <a
href="admin/cpanel/prod href="admin/cpanel/prod href="cpanel/product.ht href="product.html">Pro
uct.html">Product</a> uct.html">Product</a> ml">Product</a> duct</a>
29
Link to Other Website
Link to Other Website
<a href="https://www.google.com/">Google</a>

Link to Other Website with New Tab


<a href="https://www.google.com/" target="_blank">Google New Tab</a>

30
Link to Email

<a href="mailto:[email protected]">Email Us</a>

31
Link with ID (on a page – top)

32
Table
<table> <table border="1"> <td>Two Two</td>
<tr> <tr> <td>Two Three</td>
<td>One One</td> <td rowspan="2">One </tr>
<td>One Two</td> One</td>
<tr>
</tr> <td>One Two</td>
<td colspan="2">Three
<td>One Three</td> One</td>
<tr> </tr> <td>Three Three</td>
<td>Two One</td> <tr> </tr>
<td>Two Two</td> </table>
</tr>
</table>
33
<table border="1" cellpadding="15" cellspacing="10"> <table border="1">
<thead>
<tr bgcolor="blue">
<th>Item No</th>
<th>Item No.</th>
<th>Item Name</th>
<th>Item Name</th>
<th>Item Price</th>
<th>Item Price</th>
</thead>
</tr>
<tbody>
<tr>
<tr>
<td>1</td>
<td>1</td>
<td>Hot Coffee</td>
<td>Hot Coffee</td>
<td bgcolor="yellow">2000 MMK</td>
<td bgcolor="yellow">2000 MMK</td>
</tr>
</tr>
<tr>
<tr>
<td>2</td>
<td>2</td>
<td>Iced Coffee</td>
<td>Iced Coffee</td>
<td>2500 MMK</td>
<td>2500 MMK</td>
</tr>
</tr>
<tr> </tbody>
<td>3</td> <tfoot>
<td>Whipped Coffee</td> <th colspan="2">Total</th>
<td>3500 MMK</td> <th>5000 MMK</th>
</tr> </tfoot>
34
</table> </table>
Forms
1. Form 1. Col and Row in text area
2. Fieldset
2. Email
3. Legend
3. url
4. Action (get or post)
5. label
4. Required
6. Input 5. Placeholder
7. Select 6. Color picker
8. Button 7. Date picker
9. HTML 5
10. Maxlength
8. Datalist
11. Size

35
Form
<form action="#" method="post">
Two types of methods: get and post
Get method is used to search data
<fieldset> Post method is used in login form.
Difference between get and post is …

<legend>Login Form</legend>

</fieldset>
</form>

36
Text Input
<form>
<fieldset>
<legend>Login Form</legend>
<label>User Name:</label><br>
<input type="text" name="firstname" size="15" maxlength=8 placeholder="Enter Your
Name..."><br><br>
<label>Password:</label><br>
<input type="password" name="password" size="15" maxlength=8 placeholder="Enter
Your Password..."><br><br>
<label>Message</label><br>
<textarea rows="5" cols="15">Enter Your Message</textarea>
</fieldset>
</form>
37
Selection : Radio Button
<label>Male</label>
<input type="radio" name="gender" value="Male">

<label>Female</label>
<input type="radio" name="gender" value="Female">

38
Selection: Checkbox
<input type="checkbox" name="" value="Apple">
<label>Apple</label>
<input type="checkbox" name="" value="Mango">
<label>Mango</label>
<input type="checkbox" name="" value="Orange">
<label>Orange</label>

39
Selection: Dropdown
<select> <select size="3">
<option value="Lion">Lion</option> <option value="Lion">Lion</option>
<option value="Tiger">Tiger</option> <option value="Tiger">Tiger</option>

<option value="Bear">Bear</option> <option value="Bear">Bear</option>

</select> </select>

<select multiple>
<option value="Lion">Lion</option>
<option value="Tiger">Tiger</option>
<option value="Bear">Bear</option>
</select>
40
datalist
The <datalist> element specifies a list of <form>
pre-defined options for
an <input> element.
<input list="browsers" name="browser">

Users will see a drop-down list of the <datalist id="browsers">


pre-defined options as they input data.
<option value="Internet Explorer">
The list attribute of
the <input> element, must refer to <option value="Firefox">
the id attribute of
the <datalist> element. <option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
41
Button
<input type="submit" name="login" value="Login">

<input type="file" name="">

<input type="image" src="buttonsbg.png" name="" width="20%">

42
Datetime picker and Color picker
<input type="date" name="">

<input type="color" name="">

43
Input Text: email and url
<input type="url" name="">

<input type="email" name="">

44
Required, Size and Max length
<input type="text" name="username" id="un" required
max="20" size="8">

45
Sample Login Form
<form action="#" method="post">
<fieldset>
<legend>Login Form</legend>
<label>Username:</label><br>
<input type="text" name="username" id="un" required>
<br><br>
<label>Password:</label><br>
<input type="password" name="password" id="pw" required>
<br><br>
<input type="submit" name="login" value="Login">
</fieldset>
</form>

46
Image
<img src="../../images/capu.jpg“ >
<img src="../../images/capu.jpg" alt="Capu Image" title="Coffee" >
<img src="../../images/capu.jpg" width="300px" height="200px">
<img src="../../images/capu.jpg" width="300px" height="200px"
alt="capu" title="capu coffee">
<img src="../../images/capu.jpg" width="30%" alt="capu" title="capu
coffee">

47
marquee
<marquee>
<img src="../../images/capu.jpg" width="300px" height="200px">
<img src="../../images/creamcoffee.jpg" width="300px" height="200px">
<img src="../../images/mccoffee.jpg" width="300px" height="200px">
<img src="../../images/icedcoffee.jpg" width="300px" height="200px">
</marquee>

48
Marquee: direction
<marquee direction="right">
<img src="../../images/capu.jpg" width="300px" height="200px">
<img src="../../images/creamcoffee.jpg" width="300px" height="200px">
<img src="../../images/mccoffee.jpg" width="300px" height="200px">
<img src="../../images/icedcoffee.jpg" width="300px" height="200px">
</marquee>

49
Marquee: direction up and down
<marquee direction="up">
<img src="../../images/capu.jpg" width="300px" height="200px">
<img src="../../images/creamcoffee.jpg" width="300px" height="200px">
<img src="../../images/mccoffee.jpg" width="300px" height="200px">
<img src="../../images/icedcoffee.jpg" width="300px" height="200px">
</marquee>

<marquee direction="down">
<img src="../../images/capu.jpg" width="300px" height="200px">
<img src="../../images/creamcoffee.jpg" width="300px" height="200px">
<img src="../../images/mccoffee.jpg" width="300px" height="200px">
<img src="../../images/icedcoffee.jpg" width="300px" height="200px">
</marquee>
50
Marquee: behavior scroll
<marquee behavior="scroll">
<img src="../../images/capu.jpg" width="300px" height="200px">
<img src="../../images/creamcoffee.jpg" width="300px" height="200px">
<img src="../../images/mccoffee.jpg" width="300px" height="200px">
<img src="../../images/icedcoffee.jpg" width="300px" height="200px">
</marquee>

<marquee behavior="scroll" scrollamount=30>


<img src="../../images/capu.jpg" width="300px" height="200px">
<img src="../../images/creamcoffee.jpg" width="300px" height="200px">
<img src="../../images/mccoffee.jpg" width="300px" height="200px">
<img src="../../images/icedcoffee.jpg" width="300px" height="200px">
</marquee>
51
Marquee: behavior alternate
<marquee behavior="alternate">
<img src="../../images/capu.jpg" width="300px" height="200px">
<img src="../../images/creamcoffee.jpg" width="300px" height="200px">
<img src="../../images/mccoffee.jpg" width="300px" height="200px">
<img src="../../images/icedcoffee.jpg" width="300px" height="200px">
</marquee>

52
Audio
<audio controls>
<source src="../../media/HappyPiano.mp3" type="audio/mpeg">
</audio>

53
Video
<video controls>
<source src="../../media/CoffeeBeans.mp4" type="video/mp4">
</video>

54
Map (iframe)
Go to  https://www.mapsdirections.info/en/custom-google-maps/
Press  Create Custom Map and write your address

<div style="width: 50%">


<iframe width="100%" height="300" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="https://maps.google.com/maps?
width=100%25&amp;height=600&amp;hl=en&amp;q=Tarmwe,%20Yangon,%20Myanmar+
(CoffeeHouse)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
<a href="https://www.gps.ie/sport-gps/">gps watches</a></iframe>
</div>
55
Special Characters
https://www.whatsmyip.org/html-characters/

<p>&reg; register by smsd 2022.</p>

<p>&copy; copyright by smsd 2022.</p>

56
References
1. https://developer.mozilla.org/en-US/docs/Learn/Common_questions/
Pages_sites_servers_and_search_engines
2. https://www.w3schools.com/html/
3. HTML and CSS: Design and Build Websites: Duckett, Jon
4. https://stackoverflow.com/questions/21037711/sublime-text-2-paste-with-colors-to-
ms-word

57
Thank You for Your Time

Any Question ?

58
CSS
CSS stands for Cascading
Style Sheets
CSS describes how HTML
elements are to be displayed
on screen, paper, or in other
media

Selector – html element

59
CSS Comments
/* This is a single-line comment */
p {
color: red;
}

60
Color Picker
https://pinetools.com/image-color-picker

61
Inline css
Internal css
External css

62
Inline css
<h1 style="background-color:navy;">Hello World</h1>
<p style="background-color:pink">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>

63
Internal CSS
<style type="text/css"> <h2>Hello World Heading Internal CSS
Testing</h2>
h2{
<p>Lorem ipsum dolor sit amet,
background-color: seagreen; consectetuer adipiscing elit, sed diam
} nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi
p{ enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut
background-color: yellow; aliquip ex ea commodo consequat.</p>
}
</style>

64
External CSS
Create a css folder in the coffeehouse folder h3{
File  New file background-color: brown;
Save untitled file as style.css in the css folder }
Write link code under the <title>
<link rel="stylesheet" type="text/css"
href="css/style.css"> li{
background-color: midnightblue;
<h3>Heading 3 External CSS Testing</h3> }
<p>H<sub>2</sub>O</p>
<ul> p{
<li>Apple</li>
color: gray;
<li>Mango</li>
}
<li>Orange</li>
65
css color and background-color
<h1 style="color:Tomato;">Hello <h1 style="background-
World</h1> color:DodgerBlue;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem <p style="background-
ipsum...</p> color:Tomato;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut
wisi enim...</p>
Html color code website
Color Pattern Picker

1. Over 140 (147) Color Name


2. RGB (255,255,255)
3. Hex (#3921fc)

66
padding

67
padding

68
border
CSS BORDER STYLE
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on
the border-color value
ridge - Defines a 3D ridged border. The effect depends on the
border-color value
inset - Defines a 3D inset border. The effect depends on the
border-color value
outset - Defines a 3D outset border. The effect depends on
the border-color value
none - Defines no border
hidden - Defines a hidden border

69
margin

70
Navigation
HTML CSS

<h1 style="background- <h1 style="background-


color:DodgerBlue;">Hello World</h1> color:DodgerBlue;">Hello World</h1>
<p style="background- <p style="background-
color:Tomato;">Lorem ipsum...</p> color:Tomato;">Lorem ipsum...</p>

71
padding

72
css flex box

73

You might also like