Study with the several resources on Docsity
Earn points by helping other students or get them with a premium plan
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
qwertyuiopasdfghjklzxcvbnmqeerjdjxhisbhskdjcbdjdbjdhsjsjqisbdj
Typology: Study notes
1 / 20
This page cannot be seen from the preview
Don't miss anything!
U-Site, Brgy. Kaligayahan, Novaliches, Quezon City
Bachelor of Science in Information Technology (BSIT)
CHAPTER 4 BASIC WEB PAGE CREATION LEARNING COMPETENCIES: Learners will be able to… Create a web page using Microsoft Word; Create their own website using a free host; Design a website using an online WYSIWYG platform; Edit, and insert elements for their website.
Creating a website from scratch is quite difficult. Before, we are using codes to build our own websites. Through the development of technology, now we have these software, and platforms that could support us in constructing, and designing our own websites. Different Ways to Create a Website ➢ Using an online website builder or WYSIWYG – Choosing this process is the easiest, as it allows the users to build websites quickly, and effortlessly. This does not require any coding knowledge as the creator can manage, and manipulate everything he wants to put on a page wherein website visitors will precisely view the output. ➢ Building websites using codes – This was the first and oldest method that requires more time, and technical skills. Back then, websites are simply coded by hand, and designed in plain text editors. Example: HTML (Hypertext Markup Language) and CSS (Cascading Style Sheet) WYSIWYG stands for “What You See Is What You Get”. It is an editor or program that allows us to create, and design web pages without any coding knowledge, where the text and images are similar to a printed material or presentation. Example: MS Word, MS Excel, and MS Publisher
Website builders and web hosting services offer free and premium plans to their clients. There are pros and cons when choosing the free plan option, as some features are limited. Some providers launched their mobile applications, allowing both iOS and Android users to connect, create, and edit their websites in a more convenient way. Example: Jimdo, Wix, and Weebly
In 199 1 , HTML was first created by Tim Berners-Lee. It stands for Hypertext Markup Language ; these codes are used to create websites. HTML describes the structure of a website, and consists of several key components. We only need a text editor, and a web browser to run the HTML file.
Here’s an example of HTML structure:
**** - defines the document type **** - this is where HTML begins **** - this states the document's body **** - stating the title for the HTML page <h1> - it defines a large heading <p> - defines a paragraph <!DOCTYPE html> <html> <head> <title>My Site!
Welcome!
This is my Site.
When inserting an image, always remember to put the picture in one folder together with your html file. The image will not appear if it is not located in a same folder.
Headings are defined with the **** to **** tags. **** is the largest and important heading. **** is the smallest and least heading.
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Background Image
The **
Ordered list starts with the **** tag, and an unordered list starts with the **** tag. Each list item starts with the **** tag.
The **** tag is used as a container for HTML elements. The margin is the space around an element.
An Ordered HTML List
C B A
An Unordered HTML List
A B C
How to Put Margin This is a sample.
Padding refers to the space between an element and the content inside it.
HTML PADDING
**** - used to play an audio
**** - tag defines a hyperlink href – defines the links destination target - attribute specifies where to open the linked document mailto - create a link that opens the user's email title - attribute specifies extra information
Image as a Link
The image below is a link. Try to click on it.
Send email
Absolute URLsHTML Images
CSS Tutorial
HTML table is defined with the **** tag. Each table row is defined with the **** tag. Table header is defined with the **** ag. Table headings are bold and centered. Table data or cell is defined with the **** tag.
HTML Table
First Name Last Name
Jolli Bee
Kenny Roger
SAMPLE LAYOUT
HTML LAYOUT
WEBSITE
HTML CSS
Creating a Website
This is how you create an HTML Layout.
@2021 Footer
Test Your Understanding! A. Identify the correct answer for each statement. _____________1. It defines the links destination. _____________2. What is the HTML color code for skyblue? _____________3. It is an attribute used to specify an alternate text for an image. _____________4. Unordered list starts with a ___ tag. _____________5. WYSIWYG acronym. _____________6. It defines the size of the text in HTML structure. _____________7. What is the heading tag for Heading5? _____________8. It defines the document type of HTML. _____________9. What do you need to run an HTML file? _____________10. It defines an independent, self-contained content.
B. Write the HTML code for the given output below. Note: REFERENCES Empowerment Technologies .(2018).Manila City:Rex Publishing https://en.wikipedia.org/wiki/Jimdo https://en.wikipedia.org/wiki/WYSIWYG https://www.quackit.com/create-a-website/2_ways_to_create_website.cfm https://www.rapidtables.com/web/color/html-color-codes.html https://www.w3schools.com/html/default.asp Heading 1 Text Color – OrangeRed Background Color - Khaki Write your Codes Here
