Microsoft MASTER TRAINER PDF

Introduction to Basic
HTML 5.0 for Microsoft

Master Trainer
MOHD ZAKI GHAZALI
MASTER TRAINER : 2019
Table of Contents
1.0 HTML ..................................................................................................................................................... 2
1.1 What is HTML? ............................................................................................................................................. 2
1.2 HTML Headings ............................................................................................................................................ 2
1.3 HTML Paragraphs ......................................................................................................................................... 3
1.4 HTML Links - Hyperlinks .............................................................................................................................. 3
1.5 Images .......................................................................................................................................................... 3
1.6 HTML list....................................................................................................................................................... 4
2.0 Creating a simple post using HTML 5.0 .................................................................................................... 5
2.1 Visual Studio Code ................................................................................................................................ 5
2.2 Setting up the folder organization ............................................................................................................... 6
2.3 Introduction to Basic Coding ( basic.html ) .................................................................................................. 9
2.4 Introduction to Basic of Coding ( profile.html ) .......................................................................................... 14
2.5 Introduction to Basic of Coding ( gallery.html) .......................................................................................... 16
3.0 Creating a Two Column Blog........................................................................................................................... 19
3.1 Two column blog ( index.html ) .......................................................................................................... 20
3.1 Two column blog ( about.html ) .......................................................................................................... 23
3.2 Two column blog (post_palmoil.html, post_plastic.html, post_water.html, post_plant.html ) ......... 24
4.0 References ...................................................................................................................................................... 31
5.0 Notes............................................................................................................................................................... 32
Author :
MOHD ZAKI GHAZALI

mzaki5771@gmail.com
+6016-2015096
Disclaimer :
The author of this module and the accompanying material have used their best efforts in preparing this module.
The information contained in this module is strictly for educational and training purpose only. Any act to
reproduce / rewrite / rephrase the contents without permission or mentioning the name of author or Microsoft
or Persatuan Guru Stem is prohibited. Please used this module with respect to the knowledge. You are
responsible for your own choices, actions and results.
1|# c o d i n g f o r a l l
1.0 HTML
HTML is an acronym for Hyper Text Mark-up Language. Known as language for website. The recent
version is HTML 5.0 .
1.1 What is HTML?

HTML is the standard markup language for creating Web pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to render the content of the
page
1.2 HTML Headings

• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important heading
Example :
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
1.3 HTML Paragraphs

• The HTML <p> element defines a paragraph: i.e
We are an organisation from and for the people of ASEAN. We exist because of one vision: to build a
cohesive and prosperous ASEAN community.Our mission is to commit to promoting ASEAN awareness through
people-to-people interaction and collaboration with ASEAN stakeholders to help ASEAN build a caring, cohesive,
equitable and peaceful ASEAN Community.
Since 1967 ASEAN has gone on a long journey to accelerate the economic growth, social progress and
cultural development in the region.As one of ASEAN’s body, we are tasked to support ASEAN mainly in
promoting awareness, identity, interaction and development of the people of ASEAN.We unite people. And, we
help to develop them
1.4 HTML Links - Hyperlinks

• HTML links are hyperlinks.
• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn into a little hand.
• Hyperlinks are defined with the HTML <a> tag:
<a href="url">link text</a>
1.5 Images
• Images can improve the design and the appearance of a web page.
Example :
<img src="pic_trulli.jpg" alt="Italian Trulli">
1.6 HTML list

• HTML got two type of List Example
▪ Unordered list
▪ Ordered list
• An Unordered List:
▪ Item
▪ Item
▪ Item
▪ Item
• An Ordered List:
1. First item
2. Second item
3. Third item
4. Fourth item
2.0 Creating a simple post using HTML 5.0

2.1 Visual Studio Code
Figure 1: Interface of Visual Studio Code
For this course, we need to use Visual Studio Code. This software is free and can be downloaded from
this URL : https://code.visualstudio.com/Download
Visual Studio Code not only can be used for HTML, but other programming language as well. In this
course, we will focus only on HTML.
2.2 Setting up coding extension

1. Before start all the coding process, we need to install extension inside the Visual Studio Code.
2. Click at extension button at the left corder as shown in Figure 2 below.
Figure 2
3. Find HTML CSS support as shown in Figure 3 and click install.
Figure 3
4. Search in the box for another extension as below and install it.:
• HTML Snippet
• Open in browser
5. Now, we are ready for adventure in HTML 5.0
2.3 Setting up the folder organization
1. First we need to organize our folder and files.

2. It is easy to do using Visual Code Studio.
3. Either you can create a file and folder using normal method which is windows explorer or just
used the visual studio code to organize the file and folder.
4. Create a folder name CODING in the documents using windows explorer
Figure 4 : Windows Explorer
5. Next, in Visual Studio Editor, we need to specify the folder we are going to use using the new
1folder icon as shown below in
6. Figure 5.
Figure 5
7. Click at the open folder as shown in

8. Figure 6 to point at the directory where we just created the folder before in the windows
explorer.
Figure 6
9. Choose the folder we created and click on SELECT FOLDER as shown in Figure 7.
Figure 7
10. Our folder organization will look like picture below. There is a button to create new file and
new folder which we will go into detail later. Next will be our coding phase.
Figure 8
2.3 Introduction to Basic Coding ( basic.html )
1. We will start with a simple blog page using html. Current version of html we are using is HTML
5.0.
2. Click the create new file button, and type basic.html
1
2
Figure 9
3. Inside the editor, type html and a line of selection will appear. Pick html:5 and it will do the
magic.
Figure 10
4. A several line of coding will appear and automatically fill the editor as shown in
5. Figure 11 below. We don’t need to type each line one by one as the editor already provide it
automatically.
Figure 11
6. Our task has becomes easier. We just need to enter the coding inside <html> </html> tag.
7. As an exercise, we will insert a picture, header and list of instruction using html coding.
8. We will create a simple blog of showing the step how to fry a fish. First download a picture of
ikan goreng and save it in the CODING folder under the folder name images. Inside this folder
we will save all the images we going to use in the process of making the blog.
9. We insert the title of the blog inside <title> </title> tag. It will appear in the tab name when
we opened the html file as shown in Figure 12.
<title>Ikan Goreng</title>
Figure 12
10. Next we need to divide the section of the blog using <div> tag. The purpose of this tag, to
differentiate between, header and content. If we plan to have column later, we also needing
this tag.
11. For this exercise, we just need one section. The code will look like below.
<body>
<div>
<h1>
Ikan Goreng
</h1>
</div>
</body>
10 | # c o d i n g f orall
12. Save the file and open it using browser. The output will come like the picture below.
Figure 13
13. Next, we are going to add the image after the header. We will use the image of ikan goreng
we download earlier. The rule of thumb when making blog using html is, we need to ensure
all the source of images, audio and video is in the IMAGES folder. Make it as a habit to not
save it in the same directory with other html files. The name of the file also must be short and
direct. If there is a space between file names, the usage of ‘_’ is a MUST. For example,
“ikan_goreng.jpg”.
14. We want the image to appear after the blog title which we highlight in the header. So we add
<p></p> tag. Then the picture will appear below the title as shown in Figure 14. The line of
code is as below. Add the line below after the </h1> tag.
<p>
<img src="images/ikan.jpg" alt="ikan goreng">
</p>
Figure 14
15. Next we add the process of making the ikan goreng. In process, we use list to number it from
1 until end.
16. In the HTML, we will use the <ol> </ol> tag which define as ordered list. In order to make the
number automatically we will used <li></li> tag. We don’t need to number it manually as it
will be done automatically.
17. We need to add the code below after the </p> tag.
<h2> Ikan Goreng yang sedap</h2>

<p>
Saya suka ikan goreng. Berikut adalah cara untuk menyediakan ikan goreng.
</p>
<ol>
<li>
Siang ikan
</li>
<li>
Bersihkan ikan.
</li>
<li>
Letak kunyi dan garam
</li>
<li>
Panaskan minyak
</li>
<li>
Masukkan ikan
</li>
<li>
Goreng sehingga masak
</li>
<li>
Angkat dan tos minyak
</li>
</ol>
Figure 15
2.4 Introduction to Basic of Coding ( profile.html )
1. We want to create a profile page which have our picture.

2. First, create a new html file with profile.html name.
3. Add html:5 line inside the editor.
4. Inside <body> tag, type the code below.
<body>
<img src="images/keanu.jpg" alt="Profile">
</body>
Figure 16
5. Next we want to add a little style. The style we want to use is CSS, which also known as Cascading
Style Sheet. With CSS, we can style our blog so it is not looking to plain. For example, we want the
profile picture to be a little round .
6. Add the code below after the previous <img> tag.
<img id="profile" src="images/keanu.jpg" alt="Profile">
7. Add the CSS code below inside <head> tag after the <title> tag.
<style>
#profile {
width: 300px;
border-radius: 50%;
border: 2px solid black;
display: block;
}
</style>
Figure 17
2.5 Introduction to Basic of Coding ( gallery.html)
1. Next, are going to create a gallery of images. The purpose of this post is to show the images in
gallery environment using CSS tag.
2. In the same folder, create a new file named as gallery.html
3. Start of the coding with HTML 5.0 as previous exercises.
4. Set the <title> tag as Gallery.
5. Set two <div> tag, id = container, gallery and photo as below.
<div id="container">
<div id="gallery">
<div id="photo">
</div>
</div>
</div>
6. For the photo, we are going to use picture form another website. We will used IKEA website.
7. For example, go this site showing bed:
https://www.ikea.com/my/en/cat/single-beds-16285/
8. We are going to copy 3 URL from 3 images and insert it inside <div id="photo"> tag. Right click
at the images and click at the Copy image address.
Figure 18
9. Insert it into the <div> tag.
<div class ="photo">

<img src="https://www.ikea.com/PIAimages/0208859_PE362585_S5.JPG" alt="Bed 1">
</div>
10. Repeat the steps 8 - 9 for 2 more pictures.

11. The complete coding will look like below:
<div id="container">
<div id="gallery">
<img src="https://www.ikea.com/PIAimages/0208859_PE362585_S5.JPG"
alt="Bed 1">
</div>
alt="Bed 2">
</div>
alt="Bed 3">
</div>
</div>
</div>
</div>
12. Don’t forget to save the file.

13. Next we going to add the best part for coding, CSS.
14. Since we already label the <div> tag with id, in CSS we just call the id name and it will act according
to the code set in CSS.
15. Add the code below in the <head> section.
<style>
body{
background-color: whitesmoke;
}
.photo {
border: 8px solid white;
width: 326px;
border-bottom-width: 120px;
box-shadow: 4px 4px 10px rgb(176, 178, 180);
border-radius: 4px;
margin-right: 20px;
float: left;
}
.photo img {
width:326px;
}
</style>
16. The final output should look like picture in Figure 19.
Figure 19
Now we are finished with basic coding in the HTML. Next chapter we will proceed to Creating a
Two Column Blog.
3.0 Creating a Two Column Blog
Next we are going to create a two column blog. Two column blog meaning the blog is divided into two
section. We will follow all the previous step as to divide our blog into section using <div> tag.
Column 1 Column 2
Figure 20
1. Create a new folder name as two column blog,

2. Add this folder into new folder, same as we created folder organisation in section 2.2
3. We create another two folder.
FOLDER NAME DESCRIPTION

We will store CSS file in this folder. All calling back for
css
css style will reroute to this folder.
All images and video being used in this folder will be
Images
saved here.
4. Next we create another 5 html file.

a. index.html
b. about.html
c. post_palmoil.html
d. post_water.html
e. post_plant.html
f. post_plastic.html
5. We will add the coding into each file one by one.
3.1 Two column blog ( index.html )
1. Start by adding HTML 5.0

2. Rename the <title> as Two Column Blog.
3. We are going to divide into several section as shown in Figure 20 above. There are two column.
Inside each column there is several section.
4. As being explained before, this section can be achieved by using <div> tag.
5. First entered the <div> tag for id=wrapper.
<div id="wrapper">
</div>
6. Next add coding below under id=wrapper
<div id=”header”>
<h1>BE SUSTAINABLE</h1>
<h2>I have sustainable goals, do you?</h2>
</div>
<div id=”navigation”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About Me</a></li>
</ul>
</div>
<div id=”content”>
7. Next create <div> tag with id= left and right
<div id=”left”>
</div>
<div id=”right”>
</div>
8. Inside id=left, we will add a post which link to the html file we create earlier.
9. There are 4 post. The first post for post_water.html is as below. The post has a link to the
images in the images folder with height and width were set to a fix size.
<div class=”post”>
<h2><a href=”post_water.html”>Polluted Water Isn’t Just Dirty – It’s Deadly</a></h2>
<p class=”small”>By G. M Zaki</p>
<img width=”480” height=”360” src=”images/clean_water.jpg” alt=”child drinking water”>
<p>Access to clean water is a basic human right, yet, 1.8 million people die each year from
cholera.
</p>
</div>
10. Next post for post_plastic.html is as below :
<h2><a href=”post_plastic.html”>The Plastic Bag Craze</a></h2>
<img width=”480” height=”360” src=”images/plasticbag.gif” alt=”bouncing plastic bag”>
<p>Plastic bags in our homes, schools, parks, beaches and in the sea have been linked to
climate
change!</p>
</div>
11. Next is for post_plant.html
<h2><a href=”post_plant.html”>Breeding Plants Are Good For Us?</a></h2>
<img width=”480” height=”360” src=”images/plant.gif” alt=”happy plant”>
<p>Plant breeding is the purposeful manipulation of plant species so as to produce desired
characteristics, but why is it good for us?</p>
</div>
12. Next is for post_palmoil.html. the code is as below. There is a little bit different with this
post. We embed a video in this post. We can either copy the link from youtube or download
the video and store it in the images folder. For video embed, we used <iframe> tag.
<h2><a href=”post_palmoil.html”>Palm Oil Is Everywhere</a></h2>
<iframe width=”480” height=”360” src=”images/orangutan.mp4”></iframe>
<p>Watch as Palm Oil kills our Orang Utans! As part of biodiversity, we need a variability
of living species on our planet to form our ecosystem.</p>
</div>
13. Next for id=right we create another section within.
<div id=”right”>
<div id=”latest”>
</div>
<div id=”other”>
</div>
</div>
14. Inside id=latest, we input the coding as below. There are 3 links to the current html file in
the same folder.
<h2>Most Popular Posts</h2>

<ul>
<li><a href=”post_plastic.html”>The Plastic Bag Craze</a></li>
<li><a href=”post_plant.html”>Breeding Plants Are Good For Us?</a></li>
<li><a href=”post_water.html”>Polluted Water Isn’t Just Dirty – It’s Deadly</a></li>
</ul>
15. Whereas, in the id=other, we insert a coding like below. Basically it is a compilation of link
arrange the manner or order list.
<h2>External Links</h2>
<p>ASEAN</p>
<ul>
<li><a href=”https://aseanbiodiversity.org/”>ASEAN Center for Biodiversity</a></li>
<li><a href=”https://aseanbiodiversity.org/the-ahp-programme/”>ASEAN Heritage Park
Programme</a></li>
<li><a href=”https://environment.asean.org/awgcc/”>ASEAN Corporation on Climate
Change</a></li>
<li><a href=”https://aseaniwrm.water.gov.my/about-us/”>ASEAN Cooperation on Water Resources
Management</a></li>
<li><a href=”https://environment.asean.org/awgwrm/”>ASEAN Working Group on Resources Water
Management</a></li>
<li><a href=”https://www.asean-agrifood.org/”>ASEAN Agriculture</a></li>
</ul>
<p>UNESCO</p>
<ul>
<li><a href=”https://en.unesco.org/themes/addressing-climate-change/unesco-sites-climate-
change-observatory/”>UNESCO Natural Designated Sites and Climate Change</a></li>
<li><a href=”http://www.unesco.org/new/en/natural-sciences/environment/earth-sciences/unesco-
global-geoparks/”>UNESCO Global Geoparks</a></li>
<li><a href=”http://www.unesco.org/new/en/natural-sciences/environment/ecological-
sciences/biosphere-reserves/”>UNESCO Biosphere Reserves</a></li>
<li><a href=”https://www.iucn.org/theme/world-heritage/natural-sites/”>UNESCO Natural World
Heritage</a></li>
<li><a href=”http://www.unesco.org/new/en/natural-sciences/environment/water/ihp/about-
ihp/”>UNESCO International Hydrological Programme</a></li>
<li><a href=”http://iocwestpac.org/”>UNESCO Intergovernmental Oceanographic

Commission</a></li>
</ul>
3.1 Two column blog ( about.html )
Normally in this page, we will describe about ourselves. The information must be accurate. There is no
restriction on how to write about yourself.
1. In section 3.0, we already create a file called about.html. now we will insert the coding into the file.
2. Rename the <title> tag to the About Me.
3. Create a few sections using <div> tag. The full coding as below.
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
<div>
<div id="image">
</div>
<div id="">
</div>
</div>
</div>
4. Insert a content using <h1> and <h2> tag inside id=header.
5. Insert a link using list.
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
6. Insert an image and a little description using codes below.
<img width="600" height="400" src="images/malaysia_flag.jpg" alt="Map of Singapore">

</div>
<div id>
<h2>Welcome To Jek's Blog on Sustainabilty</h2>
<p>I was born in Malaysia in the 1990s and I would love to see my world a clean and
better place, particularly for our next generation.
</p>
3.2 Two column blog (post_palmoil.html, post_plastic.html, post_water.html,

post_plant.html )
1. For the next 4 pages of html, there are several parts which same and a small section is
different. We can just copy and paste for the section which are same.
2. Rename the <title> tag according to table below : -
Html file Title name

post_palmoil.html Palm Oil
post_plastic.html Plastic
post_water.html Water
post_plant.html Plant
3. In each page, write the code below since it all are same.
<div id="wrapper">
<div id="header">
</div>
<div id="content">
</div>
</div>
4. Write the code below for all pages in the id=right section.
<div id="latest">
<h2>Most Popular Posts</h2>
<ul>
<li><a href="post_plastic.html">The Plastic Bag Craze</a></li>
<li><a href="post_plant.html">Breeding Plants Are Good For Us?</a></li>
<li><a href="post_water.html">Polluted Water Isn't Just Dirty - It's Deadly</a></li>
</ul>
</div>
<div id="other">
<h2>External Links</h2>
<p>ASEAN</p>
<ul>
<li><a href="https://aseanbiodiversity.org/">ASEAN Center for Biodiversity</a></li>
<li><a href="https://aseanbiodiversity.org/the-ahp-programme/">ASEAN Heritage Park
Programme</a></li>
<li><a href="https://environment.asean.org/awgcc/">ASEAN Corporation on Climate
Change</a></li>
<li><a href="https://aseaniwrm.water.gov.my/about-us/">ASEAN Cooperation on Water Resources
Management</a></li>
<li><a href="https://environment.asean.org/awgwrm/">ASEAN Working Group on Resources Water
Management</a></li>
<li><a href="https://www.asean-agrifood.org/">ASEAN Agriculture</a></li>
</ul>
<p>UNESCO</p>
<ul>
<li><a href="https://en.unesco.org/themes/addressing-climate-change/unesco-sites-climate-
change-observatory/">UNESCO Natural Designated Sites and Climate Change</a></li>
<li><a href="http://www.unesco.org/new/en/natural-sciences/environment/earth-sciences/unesco-
global-geoparks/">UNESCO Global Geoparks</a></li>
<li><a href="http://www.unesco.org/new/en/natural-sciences/environment/ecological-
sciences/biosphere-reserves/">UNESCO Biosphere Reserves</a></li>
<li><a href="https://www.iucn.org/theme/world-heritage/natural-sites/">UNESCO Natural World
Heritage</a></li>
<li><a href="http://www.unesco.org/new/en/natural-sciences/environment/water/ihp/about-
ihp/">UNESCO International Hydrological Programme</a></li>
<li><a href="http://iocwestpac.org/">UNESCO Intergovernmental Oceanographic Commission</a></li>
</ul>
</div>
5. Write the code for section id=header for all pages.
</div>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
6. Next, the code for each pages is difference. We will write the code according to the section.
Each code are specified to each pages since the content are not same. The code are write in
the section of id=content.
post_palmoil.html
<div id="left">
<div class="post">
<h2><a href="post_palmoil.html">Palm Oil Is Everywhere</a></h2>
<p class="small">By. T. Darmawan</p>
<iframe width="480" height="360" src="images/orangutan.mp4" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture"
allowfullscreen></iframe>
<p>Watch as Palm Oil kills our Orang Utans! As part of biodiversity, we need
a variability of living
species on our planet to form our ecosystem.</p>
<h4>What is wrong?</h4>
<p>Not only is Palm Oil bad for the environment and a major cause of climate
change, it is also the
leading cause of orangutan extinction. Each year about 2,500 orangutans
are killed in Palm Oil
concessions. But you may ask, why do we care about the Orang Utans?
Biodiversity boosts our
ecosystem
productivity where all species, no matter how big or small, have a vital
role to play. Greater
species
diversity ensures natural sustainability for all life forms.</p>
<h4>What can we change?</h4>
<p>The next time you pick up an item from a supermarket of pharmacist, look
out for the ingredients
on the packaging. We know it is hard to avoid a product without palm
oil, but you can start by
not placing <b>just one</b> of these products in your shopping cart.</p>
</div>
<div id="comment">
<h4>Comment</h4>
<form action="#" method="get">
<textarea name="comment" id=""></textarea>
<button>Comment</button>
</form>
</div>
post_plant.html
<div id="left">
<div class="post">
<h2><a href="post_plant.html">Breeding Plants Are Good For Us?</a></h2>
<p class="small">By. T. Darmawan</p>
<img width="480" height="360" src="images/plant.gif" alt="happy plant">
<p>Plant breeding is the purposeful manipulation of plant species so as to
produce desired
characteristics, but why is it good for us?</p>
<p>Plant breeding can improve the quality of nutrition in products, and
increase the
resistance of plants, thus reducing the use of chemicals. Yet, statisics
show that pesticide use is
well over 1 billion pounds, and this is in the US alone! All this toxic
chemicals in the air we breathe and the
food we eat, OMG!</p>
<p>Support plant breeding scientists. We can even help them through computer
science, such as analyse their data through Python.
</p>
</div>
<div id="comment">
<h4>Comment</h4>
</form>
</div>
</div>
post_water.html
<div id="left">
<div class="post">
<h2><a href="post_water.html">Polluted Water Isn't Just Dirty - It's
Deadly</a></h2>
<p class="small">By. J. A. Tang</p>
<img src="images/clean_water.jpg" alt="child drinking water">
<p>Access to clean water is a basic human right, yet, 1.8 million people die
each year from cholera.</p>
<p>Water is a fundamental human need. We all <b>need</b> clean, safe water
daily for drinking,
cooking, and keeping ourselves clean. World Vision estimates that nearly
1,000 children under age 5 die each day from diarrhea caused by contaminated water.<p>
<p>Bring clean water, sanitation and hygiene to communities through the <a
href="https://donate.worldvision.org/gift-catalog/clean-
water#active">World
Vision Clean Water fund</a> for just 5 cents a day. Every little cent counts
in helping our children.</p>
</div>
<div id="comment">
<h4>Comment</h4>
</form>
</div>
</div>
Post_plastic.html
<div id="left">
<div class="post">
<h2><a href="post_plastic.html">The Plastic Bag Craze</a></h2>
<p class="small">By. J. A. Tang</p>
<img width="480" height="360" src="images/plasticbag.gif"
alt="bouncing plastic bag">
<p>Plastic bags in our homes, schools, parks, beaches and in the sea have
been linked to climate
change.</p>
<p>It is estimated that we throw away about 180,000 recyclable plastic bags
a <b>minute</b>, and
this is in ASEAN alone. Around the world, we throw away 1 trillion each
year, that's crazy!
Scientists have found that plastic bags emit the greenhouse gases methane
and ethylene when they break down, yiaks!</p>
<p>Bring your own bag to the grocery store or put your groceries straight
into your bag or backpack.
These bags ain't free candy.</p>
</div>
<div id="comment">
<h4>Comment</h4>
</form>
</div>
</div>
7. Inside each post, there is a part where we create a button for getting response from the visitor.
The button are tag with <form action > inside id=comment.
8. For next level of HTML coding, each response will be link to back-end coding using php, asp or
java. As for the front-end web development we learn until <form action> only.
9. Next, we will add CSS section. In all HTML pages we created, add this line of code below the
<title> tag :
<link rel="stylesheet" href="css/style.css"> .
10. Finally, for the CSS file, we create a file name style.css in the CSS folder. The coding for CSS file
is :
body{
font-family: Georgia, 'Times New Roman', Times, serif;
background-image: url(../images/argriculture.jpg);
background-size: cover;
}
#wrapper{
max-width: 1000px;
background-color: white;
margin: 0px auto;
padding: 20px;
overflow: auto;
border: solid 4px black;
}
#header{
text-align: center;
}
#navigation{
text-align: center;
}
#navigation ul{
list-style: none;
padding: 0;
}
#navigation li{
display: inline;
margin-right: 10px;
}
a:link{
color:black;
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: blue;
}
a:visited{
color: black;
}
a:active{
color: blue;
}
#left{
width: 600px;
float: left;
margin-right: 20px;
border-right: solid 1px black;
}
#left img{
max-width: 580px;
}
#right{
float: left;
width: 340px;
}
.post{
border-bottom: solid 1px black;
margin-right: 10px;
}
.small{
font-size: 0.8em;
color: grey;
}
.post h1{
text-align: center;
margin-right: auto;
margin-left: auto;
}
#comment{
margin-top: 20px;
}
#comment textarea{
width: 80%;
display: block;
height: 200px;
margin-bottom: 20px;
}
.post img{
display: block;
width: 75%;
margin-right: auto;
margin-left: auto;
border: 2px outset gray;
}
iframe {
display: block;
width: 75%;
margin-left: auto;
margin-right: auto;
border: 2px outset grey;
}
#latest{
border-bottom: solid 1px black;
text-align: left;
margin-right: auto;
margin-left: auto;
}
#other{
text-align: left;
margin-right: auto;
margin-left: auto;
}
#image{
text-align: center;
margin-right: auto;
margin-left: auto;
padding: 0px;
}
11. We already set the id name for each <div> tag. When we write the CSS instruction below the
title, it will called the CSS file inside CSS folder.
12. Now, we can see the final output of the blog by click at the index.html.
4.0 References
1. www.www3schools.com
2. https://futurereadyasean.org/
3. https://www.empirecode.co/
5.0 Notes

Microsoft MASTER TRAINER PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Microsoft MASTER TRAINER PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Introduction to Basic

HTML 5.0 for Microsoft

MOHD ZAKI GHAZALI

1.1 What is HTML?

1.2 HTML Headings

1.3 HTML Paragraphs

1.4 HTML Links - Hyperlinks

<a href="url">link text</a>

<img src="pic_trulli.jpg" alt="Italian Trulli">

1.6 HTML list

2.0 Creating a simple post using HTML 5.0

Figure 1: Interface of Visual Studio Code

2.2 Setting up coding extension

3. Find HTML CSS support as shown in Figure 3 and click install.

2.3 Setting up the folder organization

1. First we need to organize our folder and files.

Figure 4 : Windows Explorer

7. Click at the open folder as shown in

2.3 Introduction to Basic Coding ( basic.html )

<h2> Ikan Goreng yang sedap</h2>

2.4 Introduction to Basic of Coding ( profile.html )

1. We want to create a profile page which have our picture.

<img id="profile" src="images/keanu.jpg" alt="Profile">

2.5 Introduction to Basic of Coding ( gallery.html)

9. Insert it into the <div> tag.

<div class ="photo">

10. Repeat the steps 8 - 9 for 2 more pictures.

12. Don’t forget to save the file.

3.0 Creating a Two Column Blog

1. Create a new folder name as two column blog,

FOLDER NAME DESCRIPTION

4. Next we create another 5 html file.

5. We will add the coding into each file one by one.

3.1 Two column blog ( index.html )

1. Start by adding HTML 5.0

6. Next add coding below under id=wrapper

7. Next create <div> tag with id= left and right

10. Next post for post_plastic.html is as below :

11. Next is for post_plant.html

13. Next for id=right we create another section within.

<h2>Most Popular Posts</h2>

<li><a href=”http://iocwestpac.org/”>UNESCO Intergovernmental Oceanographic

3.1 Two column blog ( about.html )

4. Insert a content using <h1> and <h2> tag inside id=header.

5. Insert a link using list.

6. Insert an image and a little description using codes below.

<img width="600" height="400" src="images/malaysia_flag.jpg" alt="Map of Singapore">

3.2 Two column blog (post_palmoil.html, post_plastic.html, post_water.html,

Html file Title name

5. Write the code for section id=header for all pages.

<link rel="stylesheet" href="css/style.css"> .

Das könnte Ihnen auch gefallen