EASY WEB DEVELOPMENT FOR BEGINNER WEB PROGRAMMING 1

 

BAB I

## Material: Web Browser

 

### Introduction

 

A web browser is software used to explore and display web pages. This software allows users to access various websites, web applications, and other online content. Here, we will explain further about the functionality, features, and types of web browsers.

 

### Main Functions of Web Browsers

 

1.      **Displaying Web Pages**: Web browsers are responsible for displaying web pages presented in the form of text, images, videos, and other elements.

 

2.      **Interaction with Web Pages**: Users can interact with web pages through the browser, such as clicking links, filling out forms, and scrolling pages.

 

3.      **History and Bookmark Management**: Browsers store users' browsing history and allow them to save bookmarks to easily revisit specific websites.

 

4.      **Security Settings**: Browsers provide security features such as phishing detection, ad blocking, and privacy settings to protect users from online threats.

 

5.      **Enhancement of Functionality**: Many browsers include additional features such as extensions, themes, and other customization settings to enhance the user experience.

 

### Types of Web Browsers

 

1.      **General Web Browsers**

Ø  **Google Chrome**: Developed by Google, known for its speed, stability, and integration with other Google services.

Ø  **Mozilla Firefox**: An open-source browser known for its security, privacy, and flexibility through its extension ecosystem.

Ø  **Microsoft Edge**: The default browser for Windows, focused on performance, security, and integration with Microsoft services.

Ø  **Apple Safari**: The default browser for MacOS and iOS, designed for efficient performance and seamless integration with other Apple devices.

 

2.      **Open Source Project-Based Browsers**

Ø  **Chromium**: The basis for browsers like Google Chrome, Microsoft Edge, and many others.

Ø  **Brave**: A privacy-focused browser that blocks ads and trackers by default.

Ø  **Opera**: A browser that offers innovative features such as Opera Turbo to improve browsing speed.

 

3.      **Mobile Browsers**

Ø  **Google Chrome**: The mobile version of Chrome that provides data synchronization across devices.

Ø   **Safari**: The default browser on iOS devices with strong integration with the Apple ecosystem.

 

BAB II

## Material: HTML Text Editors

 

### Introduction

 

HTML (Hypertext Markup Language) is the standard language used to create and design web pages. To write HTML code, you need a text editor, which is a software application specifically designed for editing plain text. In this lesson, we'll explore different types of text editors commonly used for writing HTML code.

 

### Types of HTML Text Editors

 

1.      **Basic Text Editors**

Ø  **Notepad (Windows)**: A simple text editor included with Windows operating systems. It provides basic functionality for writing and editing text files, including HTML.

Ø  **TextEdit (MacOS)**: The default text editor on MacOS systems, offering similar basic features for writing HTML code.

 

2.      **Advanced Text Editors**

Ø  **Sublime Text**: A sophisticated text editor with features like syntax highlighting, auto-completion, and multiple selections, making it popular among developers for writing HTML and other code.

Ø  **Atom**: A customizable text editor developed by GitHub, known for its hackability and extensive package ecosystem, which includes packages for HTML development.

Ø  **Visual Studio Code (VSCode)**: A powerful, open-source code editor developed by Microsoft. It offers built-in support for HTML, along with a vast array of extensions for additional functionality.

Ø  **Brackets**: An editor specifically designed for web development by Adobe. It provides live preview and preprocessor support, making it suitable for HTML, CSS, and JavaScript development.

 

3.      **Integrated Development Environments (IDEs)**

Ø  **Adobe Dreamweaver**: An IDE that combines a visual design interface with a code editor, allowing for both visual and code-based HTML development.

Ø  **Eclipse**: A versatile IDE primarily used for Java development, but with plugins available for web development, including HTML editing capabilities.

Ø  **NetBeans**: Another IDE supporting multiple programming languages, including HTML, with features like syntax highlighting and code completion.

 

### Features of HTML Text Editors

Ø  **Syntax Highlighting**: Highlights HTML tags and attributes with different colors to improve code readability.

Ø  **Auto-Completion**: Provides suggestions and automatically completes HTML tags and attributes as you type, saving time and reducing errors.

Ø  **Code Folding**: Allows collapsing and expanding sections of code to focus on specific parts of the HTML document.

Ø  **Integrated Preview**: Offers a live preview of the HTML document, allowing developers to see changes in real-time as they edit the code.

Ø  **Extensions and Plugins**: Extensible through plugins and extensions, providing additional functionality tailored to specific needs, such as Emmet for rapid HTML and CSS coding.

 

BAB III

### Material: In-depth Introduction to HTML

 

#### Introduction

 

HTML (Hypertext Markup Language) is the standard markup language used to create and design web pages. In this material, we will delve into the fundamentals of HTML, HTML document structure, HTML elements, and how to use them to create interactive and informative web pages.

 

#### Basics of HTML

 

HTML stands for Hypertext Markup Language. It is a language used to create and structure content on web pages. HTML uses “tags” to mark elements in documents, which are then interpreted by web browsers to display content accordingly.

 

#### HTML Document Structure

 

Every HTML document starts with the `<html>` element and ends with the `</html>` element. The basic structure of an HTML document includes the head (`<head>`) and body (`<body>`).

 

- `<head>` Element: Contains meta information about the document, such as title, metadata, and links to external stylesheets.

- `<body>` Element: Contains the actual content to be displayed on the web page, such as text, images, videos, and other interactive elements.

 

#### HTML Elements

 

HTML elements are the basic building blocks of a web page. Each element has its own name and function, and can have attributes that determine the behavior or appearance of the element.

 

Common HTML elements include:

 

- `<p>`: To mark text paragraphs.

- `<img>`: To display images.

- `<a>`: To create links or hyperlinks.

- `<ul>`, `<ol>`, `<li>`: To create unordered lists and ordered lists.

- `<div>`: To group HTML elements into a single unit.

- `<span>`: To mark text that can be styled or highlighted with CSS.

 

#### Using HTML to Create Web Pages

 

With HTML elements, you can create interactive and informative web pages. Here are the general steps for creating a web page with HTML:

 

1. Define the basic structure of the HTML document by adding the `<html>`, `<head>`, and `<body>` elements.

2. Add content to the `<body>` element, such as text, images, links, and other interactive elements.

3. Use HTML attributes to adjust the behavior or appearance of elements, such as providing alternate text for images or specifying links to other pages.

4. Save the HTML document with the “.html” file extension and open it using a web browser to view the results.

 

 

BAB IV

### Material: Displaying Images in HTML

 

#### Introduction

 

Displaying images is an essential aspect of web page design. In this material, we will learn how to use HTML to display images on a web page.

 

#### HTML Image Tag

 

To display images on a web page using HTML, we use the `<img>` tag. This tag does not have a closing tag and serves to instruct the browser where to find and display the image.

 

#### Structure of the Image Tag

 

The general format for the image tag is as follows:

 

```html

<img src=”Image_URL” alt=”Alt_Text” width=”Pixel_Width” height=”Pixel_Height”>

```

 

- **src**: This attribute specifies the URL or location of the image file.

- **alt**: This attribute provides alternative text to be displayed if the image cannot be loaded.

- **width**: This attribute specifies the width of the image in pixels (optional).

- **height**: This attribute specifies the height of the image in pixels (optional).

 

#### Example Usage

 

Here’s an example of using the image tag in HTML:

 

```html

<!DOCTYPE html>

<html>

<head>

    <title>Displaying Images</title>

</head>

<body>

 

<h2>Cute Cat Image</h2>

<img src=”cat.jpg” alt=”Cute Cat” width=”300” height=”200”>

 

</body>

</html>

```

 

#### Explanation

 

- We start with the `<img>` tag.

- The `src` attribute indicates the URL or location of the image file “cat.jpg”.

- The `alt` attribute provides the alternative text “Cute Cat” for the image.

- The `width` and `height` attributes specify the size of the image.

 

 

BAB V

### Material: Using Links (Hyperlinks) in HTML

 

#### Introduction

 

Links or hyperlinks are essential elements in web design that allow users to navigate from one web page to another. In this material, we will learn how to use HTML to create links on web pages.

 

#### HTML Link Tag

 

To create links in HTML, we use the `<a>` tag. This tag allows us to link text or images to other web pages, files, or locations within the same page.

 

#### Structure of the Link Tag

 

The general format for the link tag is as follows:

 

```html

<a href="Destination_URL">Link_Text</a>

```

 

- **href**: This attribute specifies the URL or destination location of the link.

- **Link_Text**: This is the text or content that will be displayed as the link.

 

#### Example Usage

 

Here's an example of using the link tag in HTML:

 

```html

<!DOCTYPE html>

<html>

<head>

    <title>Using HTML Links</title>

</head>

<body>

 

<h2>Link to Google</h2>

<a href="https://www.google.com">Visit Google</a>

 

</body>

</html>

```

 

#### Explanation

 

- We use the `<a>` tag to create a link.

- The `href` attribute indicates the destination URL of the link to "https://www.google.com".

- "Visit Google" is the text that will be displayed as the link.

 

#### Link to Location within the Same Page

 

You can also create links to specific locations within the same page using IDs.

 

Example:

 

```html

<a href="#section2">Go to Section 2</a>

 

...

 

<h2 id="section2">Section 2</h2>

```

 

 

BAB VI

### Material: Using Headings in HTML

 

#### Introduction

 

Headings are essential elements in the structure of a web page that help organize and group content. In this material, we will learn about the usage of headings in HTML and the various heading levels available.

 

#### HTML Heading Tags

 

Headings in HTML are marked using the `<h1>` to `<h6>` tags. The higher the heading number, the smaller its size and visual importance.

 

#### Structure of Heading Tags

 

The general format for heading tags is as follows:

 

```html

<h1>Heading_Text_1</h1>

<h2>Heading_Text_2</h2>

...

<h6>Heading_Text_6</h6>

```

 

#### Example Usage

 

Here's an example of using heading tags in HTML:

 

```html

<!DOCTYPE html>

<html>

<head>

    <title>Using HTML Headings</title>

</head>

<body>

 

<h1>Heading 1 - Main Title</h1>

<h2>Heading 2 - Subtitle</h2>

<h3>Heading 3 - Small Subtitle</h3>

<h4>Heading 4 - Sub Subtitle</h4>

<h5>Heading 5 - Sub Sub Subtitle</h5>

<h6>Heading 6 - Smallest Title</h6>

 

</body>

</html>

```

 

#### Explanation

 

- We use the `<h1>` to `<h6>` tags to create headings with different levels.

- The lower the heading number, the smaller its size and visual importance.

 

#### Using Headings in Document Structure

 

Headings are also used to organize the structure and hierarchy of content within an HTML document. `<h1>` is typically used for the main page title, followed by `<h2>` for subtitles, and so on.