Scribd
Upload
28 views

Introduction To HTML - GHCC HackToLearn

Html

Uploaded by

aathishkamaraj2704
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

Introduction To HTML - GHCC HackToLearn

Html

Uploaded by

aathishkamaraj2704
Copyright
© © All Rights Reserved
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