Scribd
Upload
19 views4 pages

Fall'23

Uploaded by

tshahbaz776
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
19 views4 pages

Fall'23

Uploaded by

tshahbaz776
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/ 4

Web Development (Basics)

Tags Description
<h1> Heading
<p> Paragraph
<br> Break
Links HTML links are defined with the <a> tag.

<a href="https://www.w3schools.com">This is a link</a>


Images HTML images are defined with the <img> tag.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="
142">
href Attribute The <a> tag defines a hyperlink. The href attribute specifies the URL of
the page the link goes to.
<a href="https://www.w3schools.com">Visit W3Schools</a>
src Attribute The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed.
<img src="img_girl.jpg">
<img src="img_girl.jpg" width="500" height="600">
width and height
Attributes

The style attribute is used to add styles to an element, such as color,


style Attribute
font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
The title attribute defines some extra information about an element.
title Attribute
<p title="I'm a tooltip">This is a paragraph.</p>

<h1> defines the most important heading. <h6> defines the least
HTML Headings
important heading.

Each HTML heading has a default size. However, you can specify the
Bigger Headings
size for any heading with the style attribute, using the CSS font-
size property.
<h1 style="font-size:60px;">Heading 1</h1>
<body style="background-color:powderblue;">
Background Color

<h1 style="color:blue;">This is a heading</h1>


Text Color
<p style="color:red;">This is a paragraph.</p>

The CSS font-family property defines the font to be used for an HTML
Fonts
element.
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
The CSS font-size property defines the text size for an HTML element.
Text Size
<h1 style="font-size:300%;">This is a heading</h1>

The CSS text-align property defines the horizontal text alignment for an
Text Alignment
HTML element.
<h1 style="text-align:center;">Centered Heading</h1>
 <b> - Bold text
HTML  <strong> - Important text
Formatting  <i> - Italic text
Elements  <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

You can add comments to your HTML source by using the


HTML Comment following syntax.
Tag
<!-- Write your comments here -->
<h1 style="border:2px solid Tomato;">Hello World</h1>
Border Color

Inline - by using the style attribute inside HTML elements


Using CSS
Internal - by using a <style> element in the <head> section

External - by using a <link> element to link to an external CSS file

An inline CSS is used to apply a unique style to a single HTML


Inline CSS
element.

<h1 style="color:blue;">A Blue Heading</h1>


Internal CSS
An internal CSS is defined in the <head> section of an HTML page,
within a <style> element.

<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
<p style="background-image: url('img_girl.jpg');">
HTML Backgroun
d Images

HTML Tables
HTML tables allow web developers to arrange data into rows and
columns.

<table>
<tr>
<th>Company</th>
<th>Contact</th> ‘header of group’
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td> ‘table data cell element’
</tr>
<tr> ‘<tr>: The Table Row element’
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
A navigation bar needs standard HTML as a base. A navigation bar is
CSS Navigation
basically a list of links, so using the <ul> and <li> elements makes
Bar
perfect sense.

“Unordered lists ( UL ), ordered lists ( OL ), and list items ( LI)”

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

JavaScript Can
One of many JavaScript HTML methods is getElementById().
Change HTML
Content
The example below "finds" an HTML element (with id="demo"), and
changes the element content (innerHTML) to "Hello JavaScript".
document.getElementById("demo").innerHTML = "Hello JavaScript";
<script> Tag
In HTML, JavaScript code is inserted
between <script> and </script> tags.

<script>
document.getElementById("demo").innerHTML = "My First
JavaScript";
</script>

JavaScript
JavaScript can "display" data in different ways:
Display
Possibilities
 Writing into an HTML element, using innerHTML.
 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().

1. String
JavaScript Data
2. Number
Types
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object
JavaScript Functio A JavaScript function is a block of code designed to perform a particular
ns task.

A JavaScript function is executed when "something" invokes it (calls it).

function name(parameter1, parameter2, parameter3) {


// code to be executed
}

Reference Site: https://www.w3schools.com/html/default.asp

You might also like