Learning Basic HTML Programming
HTML Basics
HTTP (Hypertext transfer protocol) is a protocol used to transfer data between web servers to web browsers. This protocol transfers web documents written or formatted in HTML (Hypertext Markup Language). It is said markup language because HTML functions to "beautify" plain text files to be displayed in web browser programs, this is done by adding elements or often referred to as tags in the plain text file.
Basic Structure of HTML Documents
Each HTML document has a basic structure or arrangement of files
<html>
<head>
<title> Page Title </ title>
</ head>
<body>
Contains text, images, or
anything that appears on a web document.
</ body>
</ html>
As seen, the HTML file structure begins with a <html> tag and closes with the </ html> tag. In this tag there are two major sections, namely those enclosed by the <head> ... </ head> tag and <body> ... </ body> tag
Document Property Settings
Document properties are arranged through the attributes contained in the <body> element. For example, setting the background color of the page, the color of the text, the color of the link and others
Color code
In color settings use RGB codes which are displayed in hexadecimal values. Each part of the two bite codes shows the intensity of the combination of red, green and blue. For example 00 in the first two digits means there is no red color in the following color combinations: an example of a color code:
Tools and materials :
HTTP (Hypertext transfer protocol) is a protocol used to transfer data between web servers to web browsers. This protocol transfers web documents written or formatted in HTML (Hypertext Markup Language). It is said markup language because HTML functions to "beautify" plain text files to be displayed in web browser programs, this is done by adding elements or often referred to as tags in the plain text file.
Each HTML document has a basic structure or arrangement of files
<html>
<head>
<title> Page Title </ title>
</ head>
<body>
Contains text, images, or
</ body>
</ html>
As seen, the HTML file structure begins with a <html> tag and closes with the </ html> tag. In this tag there are two major sections, namely those enclosed by the <head> ... </ head> tag and <body> ... </ body> tag
Document Property Settings
Document properties are arranged through the attributes contained in the <body> element. For example, setting the background color of the page, the color of the text, the color of the link and others
Color code
In color settings use RGB codes which are displayed in hexadecimal values. Each part of the two bite codes shows the intensity of the combination of red, green and blue. For example 00 in the first two digits means there is no red color in the following color combinations: an example of a color code:
- PC / Laptop
- Text editor application (notepad ++, sublime text, etc.)
- Browser
Make web pages as follows:
<html>
<head>
<title> Web Programming </ title>
</ head>
<body>
<h1> this is heading 1 </ h1>
<h2> this is heading 2 </ h2>
<h3> this is heading 3 </ h3>
<h4> this is heading 4 </ h4>
<h5> this is heading 5 </ h5>
</ body>
</ html>
Save the HTML code above with the name heading.html then open the results using a web browser. If the writing is correct, the web page will appear as follows
Understanding List
A list is a section of text in a document that lists items from a particular group or group. For example, in a culinary website, the list can be a list of food and drinks, along with the price. List can also be a procedure (sequence of steps) of a particular job, which must be done sequentially from the first step to the last step
Types of Lists / Lists in HTML Documents
- Ordered list A consecutive list is usually marked by the use of certain numbers. This numbering can use numbers (1, 2, 3, ...) and certain alphabet characters (a, b, c, ... or i, ii, iii, ...)
- unordered list A list that is not sequential is a list whose items can be changed randomly
- definition list Definition list is a list that contains a collection of definitions of a particular term, for example a list of definitions of HTML terms
- Combination List It can be seen that the list above is a combination of sequential lists and non-sequential lists. To make the list above in the HTML document, simply merge <ol> dangan <ul>
Make a web page as follows (Ordered List):
<html>
<head>
<title> Web Programming </ title>
</ head>
<body>
List of Expertise Programs for SMK 1 Katapang
<ol>
<li> Textiles </ li>
<li> Electrical </ li>
<li> Machine </ li>
<li> Automotive </ li>
<li> TKJ </ li>
<li> RPL </ li>
<li> Multimedia </ li>
</ ol>
</ body>
</ html>
Save the HTML code above with the name ol.html then open the results using a web browser. If the writing is correct, the web page will appear as follows.
Make a web page as follows (unordered list):
<html>
<head>
<title> Web Programming </ title>
</ head>
<body>
List of Expertise Programs for SMK 1 Katapang
<ul>
<li> Textiles </ li>
<li> Electrical </ li>
<li> Machine </ li>
<li> Automotive </ li>
<li> TKJ </ li>
<li> RPL </ li>
<li> Multimedia </ li>
</ ul>
</ body>
</ html>
Save the HTML code above with the name ul.html then open the results using a web browser. If the writing is correct, the web page will appear as follows
Make a web page as follows (definition list):
<html>
<head>
<title> Description List </ title>
</ head>
<body>
<u> drink </ u>
<dl>
<dt> Coffee </ dt>
<dd> - Black hot drink </ dd>
<dt> Milk </ dt>
<dd> - White cold drink </ dd>
</ dl>
</ body>
</ html>
Save the HTML code above with the name dl.html then open the results using a web browser. If the writing is correct, the web page will appear as follows
Make a web page as follows (combination list):
<html>
<head>
<title> Combination List </ title>
</ head>
<body>
<u> Animal Category </ u>
<ol>
<li> Carnivore </ li>
<ul>
<li> Lion </ li>
<li> Tiger </ li>
<li> Crocodile </ li>
</ ul>
<li> Herbivore </ li>
<li> Omnivorous </ li>
</ ol>
</ body>
</ html>
Save the HTML code above with the name combination.html then open the results using a web browser. If the writing is correct, the web page will appear as follows
Pengen punya blog gg berbahasa inggris, cuman belum kesampaian. Mantap gan.
ReplyDeleteMonggo singgah di www.abdulmajid.id
makasih atas respon nya mas
Delete