Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
16 views

Computer Science Basics of HTML Notes 1

The document discusses the basics of HTML including common tags like headings, paragraphs, lists, links, and tables. It explains elements, empty tags, container tags, and how to add images and color. The document provides examples of HTML code.

Uploaded by

vgunarajah-21
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

Computer Science Basics of HTML Notes 1

The document discusses the basics of HTML including common tags like headings, paragraphs, lists, links, and tables. It explains elements, empty tags, container tags, and how to add images and color. The document provides examples of HTML code.

Uploaded by

vgunarajah-21
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

THE BASICS OF HTML

[Document subtitle]

By vinusha gunarajah
Computer science

The Basics of HTML

Hypertext Markup Language (HTML)

Web pages have HTML tags. These tell the browser what to do when the page is opened. It
may include: links to images, formatting commands or links to other web pages.HTML tags
wrap around text like speech marks with a / used in the closing tag. There is an example
below:

What are HTML tags?

HTML ‘tags’ (or commands) can be used to enhance a web page. Here are some simple tags that can be used in HTML.

Headings Paragraph Colour

You can make headings with: You can make a paragraph with: You can choose any colour picker
<p>put paragraph of text in and some hexadecimal numbers, but
<h1>heading 1</h1> the standard basic colours are:
here</p>
<h2>heading 2</h2> aqua,black,blue, fuchsia,gray,green,
<h3>heading 3</h3> lime,maroon,navy,olive,orange,
Add colour to your paragraph purple, red,silver,teal,white and
It goes all the way down to <h6> yellow.
with:
<p style=” color*: orange”> You can change the background
*Note that ‘colour’ in coding is colour with:
Fonts <p style=”background-color:olive”>
spelled like ‘color’
You can also choose the font by
You can choose from: using:
Linking Tags <p style=”font-family: sans-serif”>
Serif, sans-serif, monospace,
cursive and fantasy.
Add several instructions together
Strong and Emphasis in one tag by using semi-colons
(;): Inserting Images
<p
You can make an important point style=”color:orange;background-
with: An image tag is a special
color:olive;font-family:sans-
<strong>very important command that links to an image
serif”>
information</strong> file:
For example:
Add a little emphasis with: An example is on the next page.
<em>emphasised text</em>
computer science

What is an element?

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag,
where the element name is preceded by a forward slash as shown below with a few tags:

Start Tag Content End Tag

<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

An HTML element is defined by a starting tag. If the element contains other content, it ends with
a closing tag.
For example, <p> is starting tag of a paragraph and </p> is the closing tag of the same paragraph
but <p>This is paragraph</p> is a paragraph element.

Nested HTML Elements

It is allowed to keep one HTML element inside another HTML element −


For Example:
computer science

This will display the following result −


This is italic heading

This is underlined paragraph


You can also give each element a border with:
<p style=” border:5px dotted red”>
You can choose from:
Dotted Dashed Solid Double Groove Ridge Inset Outset

What are angle brackets?

Angle brackets are commonly used to enclose a code of some type.


They are:
< and >
They are here on a keyboard:

For example:
<p style=” color: orange”>
or
<h1>This is a heading</h1>

Empty tags and container tags

When tags are part of an element that can have content, the tags are called
container tags. Some elements only have a single tag and therefore can’t have any
content. These elements are called empty tags.
An easier way to remember this is:
Empty Tags do not have any closing tags. (<p>)
Container tags have closing tags. (<head></head>)
computer science

<head> </head> tag

The <head> element is a container for metadata (data about data) and is placed between the
<html> tag and the <body> tag.

Metadata is data about the HTML document. Metadata typically defines the document title,
character set, styles, scripts, and other meta information.

The following elements can go inside the <head> element:

 <title> (required in every HTML document)


 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>

<title> </title> tag

The <title> tag is required in HTML documents!

The <title> element defines a title in the browser toolbar, provides a title for the page when it is added to
favorites, and displays a title for the page in search engine results.

Note: You can NOT have more than one <title> element in an HTML document.
The title is shown here on a web page(for example :Google!)

computer science
<p> </p> tag

The <p> tag defines a paragraph.

Browsers automatically add a single blank line before and after each <p> element. You can also use CSS to style
paragraphs.

Strong and emphasis tags

Strong Emphasis

You can make an important point with: Add a little emphasis with:
<strong>very important information</strong> <em>emphasised text</em>

<!doctype html> <!doctype html>


<html> <html>
<head> <head>
</head> <em>emphasised text</em>
<strong>very important information</strong> </head>
<body> <body>
</body> </body>
</html> </html>
How to insert images

This is the code to use when inserting images :

computer science

Adding hyperlinks

HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse
over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML element!
This is an example of how to add a hyperlink:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

Making a list

HTML tables allow web developers to arrange data into rows and columns. An unordered list starts with
the <ul> tag. Each list item starts with the <li> tag.The list items will be marked with bullets (small black circles)
by default. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items will be
marked with numbers by default.
An example:
<!DOCTYPE html>
<html> This gives:
<body>
An Unordered HTML List

<h2>An Unordered HTML List</h2>  Coffee


 Tea
 Milk
<ul>
<li>Coffee</li>
<li>Tea</li> An Ordered HTML List
<li>Milk</li>
</ul> 1. Coffee
2. Tea
3. Milk
<h2>An Ordered HTML List</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
computer science
Making a table

This gives:
To make a table, type in this simple
HTML code with your information:
A basic HTML table
<!DOCTYPE html>
<html>
<style> Company Contact Country
table, th, td {
border:1px solid black; Alfreds Futterkiste Maria Anders Germany
}
</style> Centro comercial Francisco
Mexico
<body> Moctezuma Chang
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>

Embedding content from other websites

It is possible to embed content from other websites, such as video clips and audio clips in your web page. A good way
to do this is to insert an iframe. Most websites will give you the code that you need to copy and paste into your web
page.It normally begins with<iframe> and ends with </iframe>. You have to reference any content you use from
another website, so the viewer knows where it has come from originally.
Iframe: An iframe enables you to embed content from other websites into your web page.

computer science
Resizing an embedded video using html tags

To resize an image in HTML, use the width and height attributes of the tag. You can also use various CSS
properties to resize images. Here's what the image looks like at its original size: You can also use CSS
to resize the image. You can do this with the height and width properties.

For example:
<!DOCTYPE html>
<html>
<head>
<style>
video{resize:both;}
</style>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

</body>
</html>

Web page usability and accessibility

When usability is considered, designers think about things like how many clicks a user makes to enter the
content and where the best place is for each feature. The web page designer will consider how a person who
has a limited sight will find their way around the designer’s web page.
Usability is The process of making a web page quick and easy to use.
Accessibility is all about making sure that all users, including those with disabilities, can use the web page.
BBC Newsround is more appealing to children.
Find out how by clicking on the links below!
www.bbc.co.uk/newsround/news/
www.bbc.co.uk/news/
I hope you now understand more about
‘ The basics of HTML ’

You might also like