<div> – A Flexible Container
• div = division, a generic container.
• Holds text, images, headings, paragraphs, links.
• No special meaning; used for layout and styling.
• Can apply CSS: margin, padding, background, border.
<section> – A Thematic Container
• section = semantic container.
• Groups related content (topic/theme).
• Usually contains a heading.
• Improves structure, readability, and SEO.
Media Components (Images)
• Media components make a webpage attractive.
• Images are important media elements.
• Images help explain content visually.
• The size of an image can be controlled using height and width.
• Proper use of images improves the look of a webpage.
What is a URL?
• URL means Uniform Resource Locator.
• A URL is the address of a website.
• Every website has a different and unique URL.
• A URL helps us open a webpage on the internet.
• Without a URL, a website cannot be found.
How a Website Opens (Browser, DNS, Server)
When we type a URL in a browser, three main parts work together.
Browser
• A browser is software like Google Chrome, Firefox, Edge.
• It is used to open and view websites.
• The browser sends a request for a webpage.
• It shows the website on the screen.
DNS (Domain Name System)
• DNS is called the internet’s phonebook.
• It changes the website name into the correct address.
• Example:
o Website name: [Link]
o DNS finds where this website is stored.
• DNS helps the browser reach the correct server.
Server (Very Important)
• A server is a powerful computer.
• It stores:
o Website files
o Images
o Text
o HTML, CSS, and other data
• Every website lives on a server.
How a Server Works:
• The browser asks for a webpage.
• DNS finds the correct server.
• The server receives the request.
• The server sends the website data back.
• The browser shows the webpage to the user.
Simple Example:
• Browser = Messenger
• DNS = Address book
• Server = House where the website lives
Without a server:
• A website cannot exist
• A website cannot be opened
URI Parameters and URL Queries
Some URLs have extra information.
This helps the website understand what the user wants.
URI Parameters
• URI parameters identify specific content.
• They are used for:
o Users
o Pages
o Products
• Example:
/user/12345
• Here, 12345 is a unique ID.
URL Queries
• URL queries are used for searching.
• They come after a question mark (?).
• Queries send information to the website.
• Example:
?query=books
• This tells the website to show books.
Making a Website Live
• Making a website live means publishing it on the internet.
• A live website can be opened by anyone.
• A live website has its own URL.
Publishing a Website in Web’O Blocks
• Web’O Blocks is used to create and publish websites.
• Publishing saves the website on a server.
• After publishing, the website becomes live.
Steps to Publish in Web’O Blocks
Step 1: Create the Web Page
• Design the webpage.
• Add text and images.
Step 2: Click the Publish Button
• Click the PUBLISH button.
• A pop-up window opens.
Step 3: QR Code and Link
• A QR code is generated.
• A website link is provided.
• The link can be shared.
• QR code can be scanned on mobile.
Step 4: HTML Code
• HTML code is also given.
• It can be copied.
• It can be used on other platforms.
After Publishing
• The website is stored on a server.
• The website becomes live on the internet.
• Anyone with the link can view it.
✨ Final Summary
• URL is the address of a website.
• Browser opens the website.
• DNS finds the correct server.
• Server stores and sends website data.
• URI parameters identify content.
• URL queries help in searching.
• Publishing makes a website live.
• Web’O Blocks gives link, QR code, and HTML code.
List
• A list is used to display items one after another.
• Lists help make information clear and organized.
• There are two types of lists:
o Ordered List
o Unordered List
Ordered List (ol)
• An ordered list shows items in numbered order.
• It is used when the order is important.
• Example uses:
o Steps
o Instructions
o Processes
• Each item in the list is written using li (list item).
• Numbers appear automatically.
Unordered List (ul)
• An unordered list shows items with bullet points.
• It is used when the order does not matter.
• Example uses:
o Features
o Items
o Categories
• Each item is written using li.
• Bullets appear automatically.
Additional Components
These components help in formatting and linking content.
br (Line Break)
• The br component is used to move text to a new line.
• It works like pressing Enter on the keyboard.
• It does not need a closing tag.
• It is written as <br>.
hr (Horizontal Rule)
• The hr component adds a horizontal line.
• It is used to separate sections of content.
• It does not need a closing tag.
• It is written as <hr>.
a (Anchor / Link)
• The a component is used to create links.
• It connects one webpage to another.
• It uses the href attribute to store the link.
• Clicking the link opens another page or website.
pre (Preformatted Text)
• The pre component displays text exactly as typed.
• Spaces and line breaks are preserved.
• It is useful for:
o Poems
o Diagrams
o Formatted text
code (Code Component)
• The code component is used to display programming code.
• It shows text in a monospace font.
• It makes code easy to read.
• It is often used inside the pre component.
Tables in Web’O Blocks
• A table is used to display data in rows and columns.
• Tables help present information in a structured way.
• Example uses:
o Timetables
o Marksheets
o Records
table Component
• The table component is the main container for a table.
• All table elements are placed inside it.
thead (Table Header)
• The thead component groups the header rows.
• It usually contains column headings.
(Table Row)
• The tr component represents one row in a table.
• Every row must be placed inside tr.
th (Table Header Cell)
• The th component is used for heading cells.
• It appears bold by default.
• It is usually placed at the top of columns.
tbody (Table Body)
• The tbody component contains the main data of the table.
• All data rows are placed inside it.
td (Table Data)
• The td component holds the actual data.
• It is placed inside tr.
Forms in Web’O Blocks
• A form is used to collect user information.
• Forms allow users to enter data on a webpage.
• Example uses:
o Login forms
o Contact forms
o Registration forms
form Component
• The form component is a container for form elements.
• All input fields are placed inside it.
label Component
• The label component gives a name to an input field.
• It tells users what information to enter.
input Component
• The input component allows users to type data.
• It can be of different types:
o Text
o Email
o Password
o Checkbox
textarea Component
• The textarea component allows users to enter long text.
• It is bigger than a normal text box.
• It is used for messages or comments.
button Component
• A button is used to submit or reset a form.
• Common button types:
o Submit
o Reset
• Clicking a submit button sends form data.
select and option Components
• The select component creates a dropdown list.
• The option component defines choices in the list.
• It allows users to select one option from many.
✨ Final Summary
• Lists organize content.
• Formatting components improve readability.
• Tables display data clearly.
• Forms collect user information.
• Web’O Blocks components help build structured websites.