MODULE:
IT01-LIVING IN THE IT ERA-SOCIAL MEDIA AND MOBILE APPLICATION
CHAPTER 10
Web Development Using HTML
1) Basic HTML tags and page structure
2) Embedding media and formatting text
3) Creating personal web pages
OBJECTIVES
• Describe how social media facilitates e-learning and enhances digital education
experiences.
• Identify effective strategies for online branding and e-commerce using social
media platforms.
• Demonstrate techniques for engaging customers digitally to foster loyalty and
business growth. Understand and apply basic HTML tags to construct well-
structured web pages.
• Embed media elements and format text effectively to enhance user engagement
Basic HTMLandTags and Page Structure
presentation.
• Create personalized
HTML (HyperText Markup Language) is thethat
web pages standard language style
reflect individual for creating web pages. At its core,
and content
HTML uses "tags" enclosed in angle brackets ( ) to describe and structure content on the web. Every
preferences using foundational HTML skills.
web page begins with a basic structure that tells browsers how to interpret the content.
•
The Fundamental Structure of an HTML Document
A simple HTML page consists of the following elements:
My First Web Page
Welcome to My Web Page!
This is a paragraph of text.
• Declares the document as HTML5.
• The root element containing all HTML content.
• Contains meta-information, such as the page title, links to CSS, and character encoding.
• Holds the content displayed on the webpage, like headings, paragraphs, images, and more.
1
MODULE:
IT01-LIVING IN THE IT ERA-SOCIAL MEDIA AND MOBILE APPLICATION
Example: Page Skeleton
Section Description
Head Title, metadata, links to stylesheets and scripts
Body Visible content: headings, paragraphs, images, lists
Embedding Media and Formatting Text
Modern web pages are enriched with media (images, audio, video) and well-formatted text for
readability and engagement.
Formatting Text
• ... : Headings in decreasing size.
• : Paragraphs.
• or : Bold text.
• or : Italicized or emphasized text.
• : Unordered lists and list items.
• : Ordered lists and list items.
Example: Formatted Text Snippet
About Me
I am passionate about web development and love to create interactive websites.
HTML
CSS
JavaScript
Embedding Images, Audio, and Video
• : Adds an image.
• : Embeds an audio file.
• : Embeds a video.
Example: Embedding an Image
Audio Player
Your browser does not support the audio element.
Video Player
Your browser does not support the video tag.
Creating Personal Web Pages
Building a personal web page is an excellent project to apply your HTML knowledge. Here’s a step-by-
step example:
2
MODULE:
IT01-LIVING IN THE IT ERA-SOCIAL MEDIA AND MOBILE APPLICATION
Step 1: Set Up the Basic Structure
Jane Doe’s Portfolio
...
Step 2: Add Personal Sections
Jane Doe
About Me
Aspiring web developer with a love for art and technology.
My Projects
Personal Blog
Photography Portfolio
Interactive Resume
Contact
Email: jane@[Link]
Step 3: Enhance With Media and Formatting
• Include an image for your profile.
• Add a video introduction.
• Format your project list using unordered lists.
Conclusion
Developing web pages with HTML unlocks the foundation of web design. Mastery of basic tags, media
embedding, and formatting are essential for creating visually appealing, accessible, and engaging
personal web pages. Practice by creating your own pages and experimenting with different tags and
layouts.
General Summary
• HTML uses tags to structure and present content on web pages.
• Media elements like images, audio, and video enhance interactivity and visual appeal.
• Personal web pages showcase your skills and creativity—starting with a solid foundation in
HTML is key.
3
MODULE:
IT01-LIVING IN THE IT ERA-SOCIAL MEDIA AND MOBILE APPLICATION
VIDEO LINKS:
YouTube Channels: Offer lectures and visual explanations
• MDN Web Docs: HTML Guide
• W3Schools HTML Tutorial
• freeCodeCamp HTML Course
• Codecademy: Learn HTML
• [Link]: Beginner's Tutorial – [URL]
•
REFERENCES:
E-Books:
• HTML & CSS: Design and Build Websites by Jon Duckett
• Learning Web Design by Jennifer Niederst Robbins
• HTML5: Up & Running by Mark Pilgrim
Textbooks:
• Web Development and Design Foundations with HTML5 by Terry Felke-Morris
• Murach's HTML5 and CSS3 by Anne Boehm and Zak Ruvalcaba