CSS cơ bản nhất dành cho người mới học lập trìnhcó thể nói ngôn ngữ HTML là ngôn ngữ mở dễ học vì vậy không có ly do nào ko thể không học trong thơi buổi CNTT đang lên ngôi....CSS luôn đi kèm HTML vì thế nó là 1 phần không thể thiếu trong HTML
Trang 1
Objectives:
At the end of this session, you will be able to:
! Use HTML5 Elements
! Use CSS3 Features
The steps given in this session are detailed, comprehensive and carefully thought through This has been done so that the learning objectives are met and the understanding of the tool is complete Please follow the steps carefully
In order to execute the programs follow the steps given below:
1 Create a folder BDWS under C:\Temp, then create a folder Session5 in BDWS and save all the html, css and js files in this folder only
2 Download all resource files (music, video and images) using in this session from CMS " BDWS Subject " Resources to C:\Temp\BDWS\Session5 folder
3 Install Safari 5 and Opera 11 browsers for Windows
4 Invoke Marcomedia Dreamweaver 8 application by clicking on the “Start” button and then
“Programs\Marcomedia\Marcomedia Dreamweaver 8”
5 Use Marcomedia Dreamweaver 8 to write all html and CSS files
6 Use Safari, Opera or Firefox to display all html files
Part I:
Do workshop in CD
Part II:
Example 1: Create layout as shown below using HTML5 layout tags (use Safari to display this example)
<!DOCTYPE html>
<html lang = "en" >
<head>
Trang 2
}
header, nav, section, aside, footer
{
}
header
{
}
nav
{
}
section
{
}
aside
{
}
footer
{
}
</style>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
Trang 3
This is the content of article
This is the content of article
This is the content of article
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Trang 4
Example 2: HTML5 Audio (use Safari to display this example)
<html>
<head>
</head>
<body>
</body>
</html>
Figure 5.2: Output of Example 2 in Safari Example 3: HTML5 Video (use Safari or Firefox to display this example)
1 HTML5 Video format:
2 Encoding Ogg video with Firefogg:
- Firefogg is an open source, GPL-licensed Firefox extension for encoding Ogg video To use it, you’ll need to install Mozilla Firefox 3.5 or later, then visit firefogg.org
Trang 5
- Click “Install Firefogg.” Firefox will prompt whether you really want to allow the site to install an extension Click “Allow” to continue
- After restarting Firefox, firefogg.org will confirm that Firefogg was successfully installed
- Click “Make Ogg Video” to start the encoding process
3 Create a Web page as shown below:
<html>
<head>
</head>
<body>
<! video for Firefox browser >
<! video for Safari browser >
</body>
</html>
Trang 6
Figure 5.3: Output of Example 3 in Safari Example 4: HTML5 Form Fields
<html>
<head>
</head>
<body>
<form action = "" method = "post" >
size = "40" placeholder = example@domain.com" required /></td>
Trang 7
placeholder = http://www.domain.com" autofocus required /></td>
placeholder = "Select number" required /></td>
placeholder = "Select date" /></td>
</form>
</body>
</html>
Figure 5.4a: Output of Example 4 in Safari
Trang 8
Figure 5.4b: Output of Example 4 in Opera Example 5: CSS3 Border Styles (use Safari to display this example)
<html>
<head>
#border_radius
{
}
#border_image
{
Trang 9
}
#box_shadow
{
}
</style>
</head>
<body>
</body>
</html>
Trang 10
Example 6: CSS3 Multi-Column Layout (use Safari or Firefox to display this example)
<html>
<head>
#multi-column
{
/* for Mozilla */
/* for WebKit */
}
</style>
</head>
<body>
myself are very eager to start using is the Multi-Column Layout It offers
a new way to arrange text in more of a "news paper" type way You have the choice to pick the amount of columns, the column width, column gap width, and column separator </div>
</body>
</html>
Figure 5.6: Output of Example 7 in Safari
Trang 11
Example 7: CSS3 Font and NChild Attribute (use Safari or Firefox to display this example)
<html>
<head>
{
src : url ('MarketingScript.ttf') format ("opentype");
}
#font-face
{
}
i[title^=a]
{
}
li[title^=b]
{
}
#nth-child li: nth-child ( n +1 )
{
}
</style>
</head>
<body>
<ul>
</ul>
<div id = "nth-child" >
Trang 12
</div>
</body>
</html>
Figure 5.7: Output of Example 7 in Safari Example 8: CSS3 Image Zoom In and Out CSS3 (use Safari or Firefox to display this
example)
<html>
<head>
#cf4
{
Trang 13
}
#cf4 img
{
left : ;
}
#cf4 img top
{
}
{
}
{
}
</style>
</head>
<body>
<div id = "cf4" class = "hover" >
</div>
</body>
</html>
Trang 14
Figure 5.8: Output of Example 8 in Safari
Trang 15
Part III: Try It Yourself
1 Create a Web page layout using HTML5 layout tags and CSS3 features as shown below:
Figure 5.9: Output of Question 1
2 Create a Web page with flipping a simple image to another div part using CSS3
Trang 16
Figure 5.10: Output of Question 2