BAB VII
HTML material on the usage of lists
```html
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>List
in HTML</title>
</head>
<body>
<h1>HTML Lists</h1>
<h2>Ordered
List (OL)</h2>
<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ol>
<h2>Unordered
List (UL)</h2>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
<h2>Description
List (DL)</h2>
<dl>
<dt>Coffee</dt>
<dd>- Black hot drink</dd>
<dt>Milk</dt>
<dd>- White cold drink</dd>
</dl>
<h2>Nested
List</h2>
<ul>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Broccoli</li>
<li>Tomatoes</li>
</ul>
</ul>
</body>
</html>
```
Explanation:
- `<ol>`
is used to create an ordered list, with `<li>` tags for each item.
- `<ul>`
is used to create an unordered list, with `<li>` tags for each item.
- `<dl>`
is used to create a description list, with `<dt>` for titles and
`<dd>` for descriptions.
- Nested lists
are created by placing lists within lists, as shown in the example above where
the fruit and vegetable lists are placed within the main list.
I hope this
helps you understand the usage of lists in HTML.
BAB VIII
HTML material on divisions:
```html
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML
Divisions</title>
<style>
.container {
width: 80%;
margin: auto;
border: 2px solid #333;
padding: 20px;
background-color: #f0f0f0;
}
.section {
margin-bottom: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div
class="container">
<div class="header">
<h1>Welcome to Our Website</h1>
</div>
<div class="section">
<h2>About Us</h2>
<p>We are a leading company in
providing web solutions.</p>
</div>
<div class="section">
<h2>Our Services</h2>
<ul>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Digital Marketing</li>
</ul>
</div>
<div class="footer">
<p>© 2024 Our Website. All
Rights Reserved.</p>
</div>
</div>
</body>
</html>
```
Explanation:
-
`<div>`: Division or container element used to group and style content.
- `.container`:
Defines a container to hold the entire content of the webpage. It has a width,
margin, border, and padding for styling purposes.
- `.header`,
`.section`, `.footer`: These are divisions representing different sections of
the webpage.
- `.header`:
Contains the header content with a welcome message.
- `.section`:
Represents a section of content. In this example, we have "About Us"
and "Our Services" sections.
- `.footer`:
Contains the footer content with copyright information.
- CSS styles
are applied to each division class to control their appearance, including
background color, text color, padding, border, and border-radius.
This material
demonstrates how to use `<div>` elements to structure and style different
sections of a webpage using HTML and CSS.
BAB IX
HTML material for creating a registration form
```html
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Registration
Form</title>
<style>
body {
font-family: Arial, sans-serif;
}
form {
max-width: 400px;
margin: 0 auto;
}
input[type="text"],
input[type="email"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>Registration
Form</h2>
<form
action="/submit" method="post">
<label for="nama">Full
Name:</label>
<input type="text"
id="nama" name="nama" required>
<label
for="email">Email:</label>
<input type="email"
id="email" name="email" required>
<label
for="password">Password:</label>
<input type="password"
id="password" name="password" required>
<input type="submit"
value="Register">
</form>
</body>
</html>
```
Explanation:
-
`<form>`: Used to create a form. The `action` attribute determines the
URL where the form data will be sent. The `method` attribute determines the
method of sending data, such as POST or GET.
-
`<label>`: Creates labels for each input. The `for` attribute determines
the ID of the input associated with the label.
- `<input
type="text">`, `<input type="email">`, `<input
type="password">`: Different input types for entering text, email,
and password data. The `name` attribute is used to specify the name of the data
sent when the form is submitted.
- `required`:
An attribute indicating that the input is required before the form can be
submitted.
- `<input
type="submit">`: A submit button to submit the form.
- CSS is used
to style and layout form elements.
This form
requests users to input their full name, email, and password. All inputs are
required so the user must fill them out before the form can be submitted.
BAB X
HTML material about creating tables
```html
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Creating
Tables</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Student
Data Table</h2>
<table>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Program</th>
</tr>
<tr>
<td>123456</td>
<td>John Doe</td>
<td>Computer Science</td>
</tr>
<tr>
<td>789012</td>
<td>Jane Smith</td>
<td>Information Systems</td>
</tr>
</table>
</body>
</html>
```
Explanation:
-
`<table>`: Used to create a table.
- `<tr>`:
Represents a row in the table.
- `<th>`:
Represents header cells (columns) in the table. Usually used for column
headings.
- `<td>`:
Represents data cells in the table.
-
`border-collapse: collapse;`: This combines the cell borders so they appear as
one, giving a neater appearance to the table.
- `th`: Given a
light gray background color to differentiate from data cells.
- CSS is used
to style the table, including borders, padding, and text alignment.
This table is a
simple example of a student data table. Each row represents one student with
Student ID, name, and program.
BAB XI
### Converting Design to HTML
####
Introduction
After designing
a website, the next step is to convert that design into HTML code that can be
viewed and accessed by users. This process is known as converting design to
HTML. In this material, we will learn the steps to perform this conversion.
#### Step 1:
Design Analysis
- Carefully
examine the design to identify the structure and key components such as header,
navigation menu, main content, sidebar (if any), and footer.
- Note down the
design elements that need to be converted into HTML code, such as text, images,
buttons, and forms.
#### Step 2:
Preparation
- Prepare a
text editor or web development environment such as Visual Studio Code, Sublime
Text, or Atom.
- Create a new
HTML file to store the converted HTML code.
#### Step 3:
Creating Basic HTML Structure
- Create the
basic HTML framework with `<html>`, `<head>`, and `<body>`
tags.
- Add
`<meta>` tags to define character set and viewport.
- Insert the
site title using the `<title>` tag.
#### Step 4:
Semantic Structure
- Use semantic
HTML elements such as `<header>`, `<nav>`, `<main>`,
`<section>`, `<article>`, `<aside>`, and `<footer>` to build
a more meaningful and structured site.
#### Step 5:
Converting Design to HTML
- Convert each
design component into HTML code. For example, text becomes `<p>` tags for
paragraphs, images become `<img>` tags, buttons become `<button>`
tags, and forms become `<form>` tags.
#### Step 6:
Styling with CSS
- Create a
separate CSS file or use the `<style>` tag within `<head>` to add
styles and layouts to the site.
- Use CSS
selectors to target HTML elements and apply style properties such as color,
size, and position.
#### Step 7:
Responsiveness and Mobile-Friendly
- Ensure the
site adapts to various devices and screen sizes using media queries and other
responsive design techniques.
- Test the site
on various devices and browsers to ensure consistent and responsive display.
#### Step 8:
Validation and Optimization
- Validate HTML
code using tools like W3C Markup Validation Service to ensure there are no
syntax or structural errors.
- Optimize the
site for speed and performance by compressing images, reducing HTTP requests,
and minimizing file sizes.
#### Conclusion
By following
the above steps, you can transform your design into functional and aesthetic
HTML code. It's important to ensure your website is responsive, valid, and
optimized to provide the best user experience.
Additional
Resources: Learn more about HTML and CSS through online tutorials and official
documentation. Practice your skills by creating small projects and exploring
different web design techniques.