Skip to main content
pelatihan
.org
Learn. Practice. Grow.
Category
EN
Sign in
Sign up
Menu
HTML Curriculum: 6 Chapters, 60 Lessons — pelatihan.org
Home
/
Catalog
/
HTML
/
Curriculum
Curriculum
HTML Curriculum
Learn HTML online with 60 structured lessons, code examples, and 300 quiz questions.
60 lessons
6 chapters
300 questions
Summaries and key points are free to preview. Full lessons, code examples, and quizzes require a subscription.
01
HTML Tutorial
40 lessons
01
HTML Introduction
HTML (HyperText Markup Language) is a standard markup language used to build the structure of a web page. HTML is made up of a series of elements that are tagged, then the…
02
HTML Editors
To write HTML you need a text editor, which is a simple application for typing and storing text. It can use a built-in system editor like Notepad (Windows) or TextEdit (Mac), or…
03
HTML Basic
Each HTML document has the same basic framework: doctype declaration, <html> element, <head> part for metadata, and <body> for displayed content. The <title> element in <head>…
04
HTML Elements
HTML elements are page layout blocks, consisting of opening tags, content, and closing tags. Some elements are void (empty) such as <br> and <img> so that they do not need to be…
05
HTML Attributes
An attribute is the additional information provided to an HTML tag to set the way an element works or appears. Attributes are written in the opening tag with the name="values"…
06
HTML Headings
Heading in HTML is written with the tag <h1> to <h6>, where <h1> is the largest and most important heading, while <h6> is the smallest. Heading is not just a large text, but also…
07
HTML Paragraphs
The paragraph text in HTML is packaged with the <p> tag, and the browser will add a little automatic space between the paragraphs. To force new lines in paragraphs can be used…
08
HTML Styles
Styles on HTML elements can be directly assigned through attribute style with the property: value pattern. Some commonly used examples of properties are color for text color,…
09
HTML Formatting
HTML provides special elements to give format meaning to text, for example <b> and <strong> for thick, <i> and <em> for slant, as well as <mark> for highlighting text. In…
10
HTML Quotations
HTML has special elements for quotes and related text, namely <blockquote> for long quotes and <q> for short quotes in sentences. The browser automatically adds quotes to <q>.…
11
HTML Comments
HTML comments are written between <!-- dan --> and will not be displayed on the result page. Comments are useful for recording code explanations, temporarily disabling some…
12
HTML Colors
The color in HTML can be expressed in three ways: color names such as red, hexadecimal codes such as #ff0000, or functions such as rgb(255, 0, 0) and hsl(). The color is usually…
13
HTML CSS
CSS (Cascading Style Sheets) is used to set the page's appearance such as color, layout, and font. There are three ways to install CSS in HTML: inline (in attribute style),…
14
HTML Links
Links are created with the <a> element and the href attribute that indicates the address destination. The link can be absolute with the full URL or relative to the path to the…
15
HTML Images
Images are inserted with an <img> element that is void and uses the src attribute as the location of the file. The alt attribute must be filled as an image description for…
16
HTML Project
A simple bio project combines a variety of basic HTML elements into one complete personal profile page. You'll use heading for name, paragraph for description, picture for…
17
HTML Favicon
Favicon is a small icon that appears in the browser tabs, bookmarks, and address bar as a site's identity marker. Favicon is defined in the <head> section using the <link>…
18
HTML Page Title
The page title is written with the <title> element inside <head> and appears on the browser tab, search results, and when the page is bookmarked. A descriptive title helps users…
19
HTML Tables
HTML tables are used to display row and column-shaped data, arranged from <table>, <tr> for rows, as well as <th> and <td> for cells. <th> marks column or row headings that…
20
HTML Lists
HTML provides three types of lists: <ul> for bullet-in-order lists, <ol> for numbered lists, and <dl> for descriptive lists. Each item on the list is written with <li>. The list…
21
HTML Block & Inline
HTML elements can be grouped into block-levels that occupy full width such as <div> and <p>, as well as inlines that only wrap up part of the text such as <span> and <a>. The…
22
HTML Div
The <div> element is a generic block-level container that has no specific meaning, used to group other elements to be easily styled or arranged in a layout. With CSS, <div> can…
23
HTML Classes
The class attribute names the grouping on an element so that it can be given the same CSS style repeatedly. A class can be used by many elements, and an element can also hold…
24
HTML Id
The id attribute is used to uniquely name an element within a page. The value of id must not be duplicated to remain valid, and in CSS is written with a hash such as #header. id…
25
HTML Buttons
The buttons in a web page are made with the <button> element that can contain text or other elements in it. The functional button sends the form using the type="submit"…
26
HTML Iframes
Iframe is created with the <iframe> element to embed other documents, such as maps or videos, within a page. The src attribute determines the page to be displayed and the width…
27
HTML JavaScript
JavaScript can be inserted into an HTML page with the <script> element. The code is usually placed before the </body> closure so that the page element has been loaded first. In…
28
HTML File Paths
The file path specifies the location of the image file, CSS, or other page to which the page is referenced. The relative path points to a file relative to the current page…
29
HTML Head
The <head> element contains metadata about pages that do not appear directly, but are important for browsers, search engines, and other services. It contains <meta>, <title>,…
30
HTML Layout
The modern page layout is composed of semantic elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> each of which holds a specific role. This structure…
31
HTML Responsive
Responsive pages adapt their appearance to be easily opened on any screen, from cell phones to desktops. The key is in the meta viewport and the use of CSS media queries as well…
32
HTML Computercode
HTML provides special elements for displaying pieces of computer code and technical text, including <code>, <kbd>, <samp>, and <var>. The <code> element marks the code piece,…
33
HTML Semantics
Semantic elements are tags that have clear meanings, such as <header>, <nav>, <article>, <section>, <aside>, and <footer>. Unlike neutral <div>, semantic elements explain the…
34
HTML Style Guide
A neat HTML writing style makes code easier to read and maintain by the developer team. Recommended practices include writing elements in lower case, assigning value attributes…
35
HTML Entities
HTML entity is a substitute code for displaying specific characters commonly used by HTML syntax, such as sign square brackets or large parentheses. Each entity is written with…
36
HTML Symbols
Special characters such as arrows, currencies, and musical notations are not available directly on the keyboard, so they can be displayed via HTML entity code. Each symbol has a…
37
HTML Emojis
Emojis can be directly inserted into HTML because they support Unicode, so no additional images or libraries are required. Emojis can be written directly as characters or with…
38
HTML Charsets
Charset specifies how a browser converts bytes into text characters to make the writing appear correct. The standard used is UTF-8 because it supports almost all world letters…
39
HTML URL Encode
URL encoding converts specific characters in a web address into a secure format based on percentage (%) and hexadecimal code. For example, the space is 20% so the URL remains…
40
HTML vs. XHTML
XHTML is a version of HTML written following strict XML rules, so that each element must be closed, the attribute must use a valid value, and the structure must be sequential.…
02
HTML Forms
6 lessons
01
HTML Forms
HTML forms are used to collect user input such as names, emails, and messages, and then send them to the server. Its main elements are <form> as a container, <label> for…
02
HTML Form Attributes
The <form> element has several important attributes such as action for delivery purposes, method for delivery methods, target for determining where the result is opened, as well…
03
HTML Form Elements
In addition to <input>, HTML provides special elements for forms such as <select> and <option> for the blur option, <textarea> for the long text filling, as well as <label>,…
04
HTML Input Types
The <input> element has many type values that govern the type of filling, ranging from text, email, number, date, to color and range. Each type provides a keyboard and validates…
05
HTML Input Attributes
Attributes to the <input> element enrich filling behavior, such as value for initial value, placeholder for guidance, and readonly or disabled to limit input. The required…
06
Input Form Attributes
In addition to the <input> element, some attributes can also be directly attached to the <form> element. For example, autocomplete to enable automatic filling suggestions,…
03
HTML Graphics
2 lessons
01
HTML Canvas
The <canvas> element provides an image field that can be programmatically drawn using JavaScript. Canvas is bitmap, meaning each pixel is drawn and the result cannot be edited as…
02
HTML SVG
SVG (Scalable Vector Graphics) is used to display vector-based graphs that remain sharp when magnified. Forms such as circles and squares are written as XML elements, e.g.…
04
HTML Media
5 lessons
01
HTML Media
HTML5 provides built-in elements for multimedia playback, namely <video> for movies and <audio> for sound, so it no longer relies on additional plugins. Both elements support…
02
HTML Video
The <video> element plays video files directly on the page, with attributes such as width, height, controls, autoplay, and loop. To display posters when the video is not in use,…
03
HTML Audio
The <audio> element is used to play sound files such as music or live recordings on a page. Just like video, you can use controls, autoplay, loops, and some <source> for…
04
HTML Plug-ins
The <object> and <embed> elements are used to insert external content such as PDF files, images, or additional media into a page. <object> is flexible with data attributes and…
05
HTML YouTube
YouTube videos can be displayed on the page by inserting the embed code of the <iframe> element. Just change the video ID to the src address, and then adjust the width and height…
05
Web APIs
7 lessons
01
Web APIs
Web APIs are browser-based programming interfaces that JavaScript can use to interact with system features and user data. For example, geolocation for location, Web Storage for…
02
Geolocation API
The geolocation API allows web pages to obtain the location of a user's device, such as latitude and longitude, with the user's permission. Location is obtained by the…
03
Drag and Drop API
The Drag and Drop API allows the user to move elements by dragging and dropping them in a specific area. Activation begins with the draggable attribute on the element, then…
04
Popover API
Popover API allows you to display additional panels such as tooltip, menu, or small dialogs above the main content without having to create a custom layout. Activate it with the…
05
Web Storage API
The Web Storage API provides a way to store data on the client side in a pair of key values, namely permanent localStorage and sessionStorage that is lost when the tab is closed.…
06
Web Workers API
Web Worker allows JavaScript to run on separate background threads so heavy tasks like computing don't freeze the page view. Worker is created with a new constructor and…
07
Server-Sent Events API
Server-Sent Events (SSE) allows servers to send data continuously to web pages via a single HTTP connection path. On the client side, the EventSource object is used to open the…