Scribd
Upload
34 views

Introduction To HTML - GHCC HackToLearn

Html

Uploaded by

aathishkamaraj2704
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

Introduction To HTML - GHCC HackToLearn

Html

Uploaded by

aathishkamaraj2704
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

GitHub

Campus Club
PSG COLLEGE OF TECHNOLOGY
HTML
HTML - HyperText Markup Language
standard markup language
used to create and design documents on the
World Wide Web.

It is a foundational technology that, along


with CSS (Cascading Style Sheets) and JavaScript,
forms the backbone of web development.
HTML DOCUMENT STRUCTURE

<!DOCTYPE html>: Defines the document type and


version of HTML.
<html>: Root element of an HTML page.
<head>: Contains metadata and links to stylesheets
or scripts.
<title>:Sets the title of the web page shown in the
browser tab.
<body>: Contains the visible content of the web
page.
CODE IN ACTION
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
HEADERS IN HTML

<h1> - Main Heading (Top Level)


<h2> - Section Heading (Second Level)
<h3> - Subsection Heading (Third Level)
<h4> - Sub-subsection Heading (Fourth Level)
<h5> - Detailed Heading (Fifth Level)
<h6> - Smallest Heading (Sixth Level)
CODE IN ACTION

<h1>Tech Innovations 2024</h1>


<h2>Breakthroughs in Renewable Energy</h2>
<h3>Solar Power Advancements</h3>
<h4>New High-Efficiency Solar Panels</h4>
<h5>Cost-Effectiveness of Solar Technology</h5>
<h6>Future of Solar in Emerging Markets</h6>
PARAGRAPHS
opening <p> closing </p>

CODE IN ACTION
<p>Paragraph 1: This is the first paragraph of text.</p>
<p>Paragraph 2: This is another paragraph with more
content.</p>
NOTE:
<p> This sentence has extra spaces, but HTML will
display it with only single space. </p>
LINKS
<a href="URL">Link Text</a>
<a> tag (anchor tag)
href : This specifies the destination URL where the link points to.
Link Text: This is the clickable text that the user sees.

CODE IN ACTION
<a href="https://www.wikipedia.org">Visit Wikipedia</a>

<a href="mailto:support@example.com">Email Us</a>


IMAGES
<img src="URL_of_image" alt="Description of image"
width="Width_in_pixels" height="Height_in_pixels">

<img> = self-closing tag and does not require a closing tag.


src: Specifies the path to the image.
alt: Provides alternative text for the image if it cannot be
displayed.
width and height: Optional attributes that set the dimensions of
the image

CODE IN ACTION
<img src="https://example.com/image.jpg" alt="An example
image" width="300" height="200">
A QUICK REFRESH!
<!DOCTYPE html>
<html>
<head>
<title>My Simple HTML Page</title>
</head>
<body>
<h1>Welcome to My Simple HTML Page</h1>
<h2>About This Page</h2>
<p>This page demonstrates the basic structure of an HTML.</p>
<h3>Learn More About HTML</h3>
<p>To explore more about HTML, visit <a
href="https://www.w3schools.com/html/"
target="_blank">W3Schools HTML Tutorial</a>.</p>
h3>Image Example</h3>
<img src="https://source.unsplash.com/600x400/?nature"
alt="Beautiful nature">
</body>
</html>
FORMATTING TEXT
<strong> tag indicates that the text is of strong importance
<em> tag is used to emphasize text, rendering it in italic by default
<b> tag simply makes the text bold without implying any importance.

CODE IN ACTION

<p> Make sure to <strong>register early</strong> for the conference to


secure your spot </p>

<p>The weather forecast predicts <em>heavy rain</em> tomorrow, so please


carry an umbrella </p>

<p> Don't forget to visit our booth for a <b>free sample</b> at the
trade show! </p>
BREAK
<br> tag does not require a closing tag
<br> tag is to create a new line in the text, which can be useful for
formatting content without adding extra space
CODE IN ACTION
<!DOCTYPE html>
<html>
<head>
<title>Using BR Tag</title>
</head>
<body>
<h2>Address Example</h2>
<p>
123 Main Street<br>
Springfield, IL 62701<br>
United States
</p>
</body>
</html>
DIVISION
<div> tag is commonly employed to create sections in a webpage.
class attribute is used within a <div> tag (or any other HTML element) to
define a specific style or behavior for that element.

CODE IN ACTION
<div class="header">
<h1>My Website Title</h1>
</div>

<div class="content">
<p>Welcome to my website. This is where I share my thoughts.</p>
</div>

<div class="footer">
<p> 2024 My Website</p>
</div>
LISTS
ordered lists (<ol>)
<ol>
<li>Item 1</li> <li>=list item
<li>Item 2</li>
</ol>
unordered lists (<ul>)
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
description lists (<dl>) <dt>=definition term
<dl> <dd>=definition description
<dt>Term 1</dt>
<dd>Description of Term 1.</dd> <dd>
</dl>
CODE IN ACTION
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup language used for creating web pages.</dd>
<dt>CSS</dt>
<dd>A stylesheet language used for describing the
presentation of a document written in HTML.</dd>
</dl>
TABLE
<table>: This tag defines the entire table.
<tr>: This tag defines a table row.
<th>: This tag defines a table header cell, typically used for column
headings.
<td>: This tag defines a standard table data cell.
CODE IN ACTION
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>20</td>
</tr>
</table>
FORMS
<form action="/submit" method="POST">
<!-- Form elements go here -->
</form>

action: Specifies the URL to which the form data will be sent when the
form is submitted.
method: Specifies the HTTP method to use when sending form data. Common
methods include GET and POST.

COMMON FORM ELEMENTS:


<label> element is used to define a label for an input element in a form.
<label for="name">Name:</label>
<input type="text"> (Text Input):
Used for single-line text input.
<input type="text" id="name" name="name">
<input type="password"> (Password Input):
Used for passwords, where the input is obscured.
<label for="password">Password:</label>
<input type="password" id="password" name="password">

<input type="radio"> (Radio Buttons):


Used for selecting one option from a set.
<label> <input type="radio" name="gender" value="male"> Male </label>
<label> <input type="radio" name="gender" value="female"> Female
</label>

<textarea> (Text Area):


Used for multi-line text input.
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

<input type="submit"> (Submit Button):


Used to submit the form.
<input type="submit" value="Submit">
<select> (select dropdown):
Used for selecting an option from a dropdown menu.
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select>

<input type="checkbox"> (checkboxes);


Used for selecting one or more options.
<label>
<input type="checkbox" name="subscribe" value="yes"> Subscribe to
newsletter
</label>
CODE IN ACTION
<!DOCTYPE html>
<html>
<head>
<title>Form with Labels</title>
</head>
<body>

<h2>Registration Form</h2>
<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username"
required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required><br><br>

<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>

<input type="submit" value="Register">


</form>

</body>
</html>
PRACTICE!
Personal Profile Page

Objective: Create a simple personal profile webpage using basic HTML tags.

Instructions:

1. Create an HTML file named profile.html.


2. Include the following elements:
○ A main heading (<h1>) with your name.
○ A subheading (<h2>) for your profession (e.g., "Web Developer").
○ A paragraph (<p>) describing yourself.
○ A list (<ul>) of your hobbies (at least three).
○ A link (<a>) to your favorite website (e.g., your portfolio or
LinkedIn).
○ An image (<img>) of yourself (you can use a placeholder image if
necessary).
○ Use the <strong> tag to highlight your skills or strengths in the
description.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy