Scribd
Upload
31 views

HTML Notes

The document provides an overview of HTML, CSS, and JavaScript and their uses. It discusses frontend and backend development and the differences between them. It also covers HTML tags and elements, document structure, text formatting, lists, links, images, and forms.

Uploaded by

ABDIWAHID MOLU
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views

HTML Notes

The document provides an overview of HTML, CSS, and JavaScript and their uses. It discusses frontend and backend development and the differences between them. It also covers HTML tags and elements, document structure, text formatting, lists, links, images, and forms.

Uploaded by

ABDIWAHID MOLU
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

DAY 1

HTML (Hypertext Markup Language) is used for structuring content on the web. It defines the basic
layout and format of a webpage.

CSS (Cascading Style Sheets) is used for styling web pages. It describes how HTML elements should be
displayed in terms of layout, colors, fonts, and more.

JavaScript (JS) is a programming language used to create interactive and dynamic content on webpages,
like animations, form validations, and interactive maps.

BACKEND VS FRONTEND
B

Aspect Frontend Developer Backend Developer

Focus User interface and experience Server, application, and database

Languages HTML, CSS, JavaScript Python, Ruby, Java, PHP, .NET, Node.js

Responsibilities Design and implement the visual Manage the application logic, database, server-side
elements functions

Tools/Frameworks React, Angular, Vue.js Express, Django, Ruby on Rails

Directly with the website's design and


Interaction With the server, database, and application logic
layout

Ensure the user-facing side is functional, Ensure the website/application runs smoothly on the
Objective
efficient, and attractive server, is scalable, and secure

Cc
VSCODE INSTALLATION Click HERE

LEARN HOW TO INSTALL

https://vscode.dev/ ONLINE VERSION

DAY 2
EXTENSIONS –

PROJECT1
Learn about HTML tags and elements - Headers and paragraphs
1. HTML tags are used to hold the HTML element.
2. HTML element holds the content.
3. HTML attributes are used to describe the characteristics of an HTML element in detail.
NESTING -one element placed inside another element

PROJECT2
Img, divs, inputs
button,

<h1>TAWAQALSOFT</h1>

<h2>WEB DEVELOPMENT BOOTCAMP</h2>


<h3>Dive into HTML, CSS, and JavaScript to Build Your Web Development
Skills</h3>
<p>Web Development Bootcamps provide intensive training in HTML, CSS, and
JavaScript, equipping students with essential skills to create interactive
websites. These programs combine theory and practice, preparing
participants for careers as web developers by teaching them to build
responsive, user-friendly websites.</p>

<div>
<h1>TAWAQALSOFT</h1>
<h2>WEB DEVELOPMENT BOOTCAMP</h2>
<h3>Dive into HTML, CSS, and JavaScript to Build Your Web Development
Skills</h3>
<p>Web Development Bootcamps provide intensive training in HTML, CSS,
and JavaScript, equipping students with essential skills to create
interactive websites. These programs combine theory and practice,
preparing participants for careers as web developers by teaching them to
build responsive, user-friendly websites.</p>
</div>
<div>
<img src="https://images.unsplash.com/photo-1457305237443-44c3d5a30b89?
w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8d2ViJTIwZGV2ZWxvcG1lbnR8ZW58MHx8MHx
8fDA%3D" width="100%"" alt="A picture of a junior developer working
station">
</div>
<div>
<h2>Welcome to TAWAQALSOFT WEB DEVELOPMENT BOOTCAMP!</h2>
<p>You have been granted access to the platform. Please create an
account.</p>
<input type="text" placeholder="Enter username">
<input type="password" placeholder="Enter password">
<input type="file">
<button>Sign up!</button>
</div>

JitHub is a free* third party UWP client for github.com. You can use JitHub to manage the code,
issues, pull requests, commits and much more in your repositories.

Universal Windows Platform (UWP) apps (formerly Windows Store apps, Metro-style
apps and Modern apps) are applications that can be used across all compatible
Microsoft Windows devices. DAY 3
Document Structure in HTML5

- HTML5 is the latest version of Hypertext Markup Language, the code that describes
web pages.
- `<!DOCTYPE html>`: This declaration defines the document to be HTML5, helping the
browser to display the content correctly.
- `<html>`:l It's the root element of an HTML page.
- `<head>`: Contains meta-information about the document, like its title, link to CSS
files, and other meta tags.
- `<body>`: Encloses the content of the web page, visible to the user.
- HTML5 introduces semantic elements that provide meaning to the web content. These
include `<header>`, `<footer>`, `<article>`, `<section>`, and more.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

exclamation mark(shift + 1), shift + tab

"Headings, Paragraphs, and Text Formatting"


HTML5 uses headings (<h1> to <h6>) to define a hierarchy, with <h1> being the most
important.
Paragraphs (<p>) are basic text containers. They separate text into blocks, making it
easier to read.
Text formatting tags like <b>, <i>, <strong>, and <em> help in emphasizing certain text
parts.

HEADERS
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<p></p>

<b></b>
<i></i>
<strong></strong>
<em></em>
"HTML Tags and Elements Overview":

HTML tags are the building blocks of HTML pages. They define and structure the web
page content.
Elements like <div> and <span> are used for layout and styling purposes.
Hyperlinks (<a>) and images (<img>) are integral for interactivity and visual appeal in
web design.

- Basic HTML tags form the foundation of web content structure and design.
- Structural tags like `<div>` and `<span>` define sections and group content, while
semantic tags like `<header>` and `<article>` provide context and meaning.
- There's a distinction between inline elements (like `<span>`, `<a>`) which do not start
on a new line and block-level elements (like `<div>`, `<p>`) which typically start on a
new line.

"Text Elements: Lists, Links, and Images":

- Lists are essential for organizing content. Ordered lists (`<ol>`) display items in a
numbered format, while unordered lists (`<ul>`) use bullet points.
- Hyperlinks (`<a>`) connect different pages or resources and are crucial for navigation.
- Images (`<img>`) enrich web pages visually and are embedded using the `src` attribute
to specify the image path and `alt` attribute for accessibility.

ordered list and unordered list


<ul>
<li>Mombasa</li>
<li>Nairobi</li>
<li>Kisumu</li>
</ul>

<ol>
<li>Mombasa</li>
<li>Nairobi</li>
<li>Kisumu</li>
</ol>
The <a> tag defines a hyperlink, which is used to link from one page to another.

The HTML <img> tag is used to embed an image in a web page.


The <img> tag has two required attributes:

src - Specifies the path to the image


alt - Specifies an alternate text for the image

"Meta Tags for Document Metadata":

Meta tags in HTML provide essential information about the webpage, which is not
displayed to the users but is critical for browsers and search engines.
They include details like character set (<meta charset="utf-8">), viewport settings for
responsive design (<meta name="viewport" content="width=device-width, initial-
scale=1.0">), and SEO-related information like descriptions and keywords.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

1. The
2. Quick
3. Brown
4. Fox
5. Jumps
6. Over

FORMS
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

<form>
<!-- .
form elements
. -->
</form>

The Action Attribute


The action attribute defines the action to be performed when the form is submitted.

<form action="#">
<!-- .
form elements
. -->
</form>
<form action="#">
<label for="firstName">First name:</label><br>
<input type="text" id="firstName" name="firstName" value="Hussein"><br>
<label for="lastName">Last name:</label><br>
<input type="text" id="lastName" name="lastName"value="" placeholder="Enter last name"><br><br>
<input type="submit" value="Submit">
</form>

the form data is sent to a file called "action_page.php".

The Target Attribute


The target attribute specifies where to display the response that is received after submitting the form.

The Method Attribute


The method attribute specifies the HTTP method to be used when submitting the form data.
<form action="#" method="post">

The Autocomplete Attribute


The autocomplete attribute specifies whether a form should have autocomplete on or off.
<form action="#" autocomplete="on">

The Novalidate Attribute


The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted.
<form action="#" novalidate>

<form action="#" novalidate></form>

[email protected]
[email protected]

The HTML <form> Elements


The HTML <form> element can contain one or more of the following form elements:

<input>
Get input from a user
type =”button, checkbox, color, date, datetime-local, email, file, hidden, image, month,
number, password, radio, range, reset, search, submit, tel, text, time, url, week”
<label></label
Labels are important for users of screen-readers, as they enable the reader to announce
the label when the input element is focused.

<form action="#">
<label for="firstName">First name:</label><br>
<input type="text" id="firstName" name="firstName" value="Hussein"><br>
<label for="lastName">Last name:</label><br>
<input type="text" id="lastName" name="lastName"value="" placeholder="Enter last name"><br><br>
<input type="submit" value="Submit">
</form>

http://127.0.0.1:5500/?firstName=Jamila&lastName=Jamal#

<select></select>
defines a drop-down list:
<option></option>
defines an option that can be selected.
<form action="#">
<label for="coding">Choose a programming language</label>
<select id="coding" name="coding">
<option value="JavaScript">JavaScript</option>
<option value="Python">Python</option>
<option value="PHP">PHP</option>
<option value="TypeScript">TypeScript</option>
<option value="c">C</option>
<option value="c++">C++</option>
<option value="C#">C#</option>
<option value="Ruby">Ruby</option>
</select>
<input type="submit">
</form>

size=”#” – on the label element (used to specify the number of visible values)
<textarea></textarea>
defines a multi-line input field (a text area):
Rows and cols
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.

<textarea name="message" rows="10" cols="30">


Hello there
</textarea>
style="width:200px; height:600px;

<button></button>
defines a clickable button:

<button type="button" onclick="alert('BootCamp Day 4')">Click Me!</button>

<fieldset></fieldset>

used to group related data in a form.

<legend></legend>
defines a caption for the <fieldset> element.
<!DOCTYPE html>
<html>
<body>

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend element defines a caption
for the fieldset element.</p>

<form action="#">
<fieldset>
<legend>Personal Information</legend>
<label for="firstName">First name:</label><br>
<input type="text" id="firstName" name="firstName" value="Hussein"><br>
<label for="lastName">Last name:</label><br>
<input type="text" id="lastName" name="lastName"value="" placeholder="Enter last name"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

</body>
</html>

<datalist></datalist>
element specifies a list of pre-defined options for an <input> element.
<form action="#">
<input list="textEditors" name="textEditor">
<datalist id="textEditors">
<option value="SublimeText">
<option value="Atom">
<option value="Notepad++">
<option value="Eclipse">
<option value="PyCharm">
</datalist>
<input type="submit">
</form>

<output></output>
represents the result of a calculation (like one performed by a script).

<h2>The output Element</h2>


<p>The output element represents the result of a calculation.</p>

<form action="#"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
INPUT
Buttons:
Used to submit forms, reset values, or trigger JavaScript events.
Checkboxes:
Allow users to select one or more options from a set.
Color Selection:
Enables users to choose a color.
Dates:
Facilitates the selection of a date (year, month, day).
Emails:
Designed for email address input.
Files:
Allows users to upload files.
Hidden Inputs:
Stores data that users don't interact with directly.
Images:
Used as graphical submit buttons.
Numeric Values:
Accepts numeric input, including decimal and integer numbers.
Passwords:
Conceals the input text, typically used for sensitive information.
Radio Buttons:
Lets users select one option from a group.
Ranges:
Provides a control for inputting a value within a specified range.
Reset Buttons:
Resets form fields to their initial values.
Search Fields:
Optimized for search queries.
RADIO
Radio buttons let a user select ONLY ONE of a limited number of choices:
<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines a radio button:</p>

<p>Choose your favorite Web language:</p>


<form action="#">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
<p> NB CSS and HTML are not programming languages</p>

CHECKBOX
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form action="#">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
GIT, GITHUB AND NETLIFY
Git is a version control system that lets you manage and keep track of your source code history.

GitHub is a cloud-based hosting service that lets you manage Git repositories.

You might also like