COURSEFORBEGINNER A STEP BY STEP GUIDE VOLUME 1 ROZIYALINEY - FATIMAH ZAHRA - ATIJAH - FAZILAH - HARZULAILI
A STEP BY STEP GUIDE HTML COURSEFORBEGINNER VOLUME 1 ROZIYALINEY - FATIMAH ZAHRA - ATIJAH - FAZILAH - HARZULAILI
PREFACE i This Book guides the reader step by step to learn basic HTML. This book presents three steps include STEP 1 - Introduction to HTML, STEP 2 - Constructs webpage using HTML and STEP 3 - Makes Hyperlink to navigate webpage. Besides that, it comprises of exercises such as a structured question and essay to develop more attractive and interesting learning sessions. This book also accompanied by related videos to give a clearer understanding about the topic. Readers can scan the QR code to open the link. This book is suitable for the beginners who want to deepen the world of HTML at a basic level. It is hoped that this book can bring a positive impact on all readers.
HTML COURSEFORBEGINNER VOLUME 1 A STEP BY STEP GUIDE EDITOR Atijah binti Marsithi WRITERS Roziyaliney binti Muhammad Fatimah Zahra binti W Razali Atijah binti Marsithi Fazilah binti Ismail Harzulaili binti Saleh REVIEWER Siti Norhidayah binti Saad CONTENT & COVER IMAGE Canva DESIGNER Atijah binti Marsithi First Published August 2023 All rights reserved. This book or any portion thereof may not be reproduced or used in any manner whatsoever without the express written permission of the publisher e ISBN Published by POLITEKNIK MUADZAM SHAH Lebuhraya Tun Abdul Razak 26700 Muadzam Shah Pahang Darul Makmur. Tel. No : 09-4502005/ 2006/ 2007 ii
In the name of ALLAH, the Most Gracious and Most Merciful. Praise be to Allah SWT, whose blessing and guidance have helped us in completing this eBook entitled A step by step guide HTML Course for Beginner Vol. 1. We would like to express our sincere gratitude to our family and friends for their kind, support, and motivation. Our sincere thanks also specially to committee member of eLearning Unit of Politeknik Muadzam Shah and the Instructional and Digital Learning Division, Department of Polytechnic and Community College Education for the opportunities in their digital learning project and leading us working on diverse, exciting for writing this eBook. We would like to thank the rest to our reviewer and supporter. Our honor goes to Madam Fazilah Ismail as a Head of Department, Information Technology and Communication Department and Madam Siti Norhidayah Saad as a content expert reviewer for this eBook content. APPRECIATION iii iii
STEP 1 : Introduction to HTML 01 Test Yourself 29 STEP 2 : Constructs webpage using HTML 06 References 32 STEP 3 : Makes Hyperlink to navigate webpage 24 Table of Contents A Step by Step Guide : HTML Course for Beginner Vol. 1 iv
Introduction A Step by Step Guide : HTML Course for Beginner Vol. 1 to HTML
A Step by Step Guide : HTML Course for Beginner Vol. 1 02 What is HTML? HTML is an abbreviation of Hyper Text Markup Language, that use to develop a web site. Markup Language Markup language are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a text file. The code used to specify the formatting are called tags. Why HTML is Markup Language? Hypertext means machine readable text and Markup means to structure it in a specific format. HTML is called hypertext markup language because it is a language that allows users to organize, improve the appearance of, and link text with data on the internet.
Title and Body Output A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML Structure Html fail is divide by two, <head> and <body>. Head is use as a header of the web, meanwhile Body is use as a document. Title will display at a Title of website. 03
It provides metadata about the HTML document. Metadata will not be displayed on the page. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML Structure – Meta Tag 04
A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML Structure – External Link The <link> tag defines a link between a document and an external resource. The <link> tag is used to link to external style sheets. 05
A Step by Step Guide : HTML Course for Beginner Vol. 1 Constructs using HTML webpage
Attribute HTML BODY - BGCOLOR Output 07 Tag Value Closing Tag A Step by Step Guide : HTML Course for Beginner Vol. 1 07
Browsers automatically add an empty line before and after a paragraph. <p> tag: 08
Output A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML - Color Value 09
Code Color A Step by Step Guide : HTML Course for Beginner Vol. 1 10
A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML Body – Background Image Output 11
03 HTML Body – Text Color Output 12 A Step by Step Guide : HTML Course for Beginner Vol. 1
03 HTML - Text Formatting Output Output Example of HTML Formatting 13 A Step by Step Guide : HTML Course for Beginner Vol. 1
Output A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML - Text Formatting (Font Style) 14
Output A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML - Text Formatting (Font Color) 15
Output A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML - Text Formatting (Font Size) 16
Output A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML - Text Formatting (Text Alignment) 17
Output A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML - Text Formatting (Text Alignment) It works for paragraphs, tables, and other elements: <p align="center">paragraph content here</p> <table align="center">table content here</table> <div align="center">div content here</div> <h2 align="center">header content here</h2> 18
Output A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML - Heading 19
The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. HTML - MARQUEE TEXT <marquee>Text Here</marquee> Default : from right to left <marquee direction="right">TEXT</marquee> Default : From left to right <marquee bgcolor="#bfcee5" direction="right">Text Here</marquee> What happen??
Output A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML - HR Line The <hr> tag may still be displayed as a horizontal rule in visual browsers. 21
Output A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML - HR Size Attribute The size attribute specifies the height of a horizontal line, in pixels. 22
Output A Step by Step Guide : HTML Course for Beginner Vol. 1 HTML - HR Align Attribute The align attribute specifies the alignment of a horizontal line. Note: The align attribute has no effect unless the width attribute is set to less than 100%. 23
Makes Hyperlink A Step by Step Guide : HTML Course for Beginner Vol. 1 WebPage to navigate
HTML – Hyperlink (Within a Page) Output A Step by Step Guide : HTML Course for Beginner Vol. 1 25
HTML – Hyperlink (Between Pages) Output A Step by Step Guide : HTML Course for Beginner Vol. 1 26
_self Default. Opens the document in the same window/tab as it was clicked. HTML – HYPERLINK TARGET _blank Opens the document in a new window or tab. HTML – Hyperlink (Image Hyperlink) Output A Step by Step Guide : HTML Course for Beginner Vol. 1 27
Output HTML – HYPERLINK (EMAIL ADDRESS) A Step by Step Guide : HTML Course for Beginner Vol. 1 28
A Step by Step Guide : HTML Course for Beginner Vol. 1 Test Yourself
3 1 2 4 5 6 7 8 9 10 TEST YOURSELF 1 <b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text <mark> - Marked text <small> - Small text <del> - Deleted text <ins> - Inserted text <sub> - Subscript text <sup> - Superscript text Write HTML code for all this text format. Observe the output. Screen shot your code and output. A Step by Step Guide : HTML Course for Beginner Vol. 1 30
TEST YOURSELF 2 By using HTML code, create a file that namely as “My Biodata”. Your file must use all of html code that we have learn before. Create a simple HTML file that include Heading (h1- h6) Format text Attribute text Marquee text Hr A Step by Step Guide : HTML Course for Beginner Vol. 1 31
REFERENCES A Step by Step Guide : HTML Course for Beginner Vol. 1
A Step by Step Guide : HTML Course for Beginner Vol. 1 33 1) Donald. I. (2020). Web Design with HTML and CSS Training Course Kindle Edition. Kindle. (ASIN: B08SNQPMLW) 2) Olofu. M. (2020). HTML5 Website Design Guide Kindle Edition. Kindle. (ASIN: B08RS5SY8G) 3) Aryuk. P. (2020). Web Software: Website Design Software For Newbies and Professionals 2020. Aryuk Publications. (B08SQZWRNK) 4) MacDonald. M. (2020). WordPress: The Missing Manual: The Book That Should Have Been in the Box 3rd Edition. O'Reilly Media. (ISBN: 1492074160) 5) N R Jennifer (2018) Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics 5th Edition. O'Reilly Media. Canada. (ISBN: 9781491960202)
POLITEKNIK MUADZAM SHAH Lebuhraya Tun Abdul Razak 26700 Muadzam Shah Pahang Darul Makmur. Tel. No : 09-4502005/ 2006/ 2007