Scribd
Upload
30 views

Computer Fundamentals

Uploaded by

Tahreem Fatima
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views

Computer Fundamentals

Uploaded by

Tahreem Fatima
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Computer Fundamentals (Notes)

HTML- HTML, or HyperText Markup Language, is the standard markup language used to
create web pages. It's the most basic building block of the web, defining the structure and
meaning of web content. HTML is made up of elements that tell the browser how to display
content. For example, HTML elements can label pieces of content as "this is a heading", "this
is a paragraph", or "this is a link". HTML is used to create static pages with text, headings,
tables, lists, images, links, and more.

HTML elements are the building blocks of HTML pages

HTML elements are represented by <> tags

HTML Elements

Elements of HTML are of 2 types: container elements and empty elements


An HTML element is a start tag and an end tag with content in between:
<h1>This is a Heading</h1>

Start tag Element content End tag

<h1> This is a Heading </h1>

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

<html>

<title>Page Title</title>

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>

</html>

 The <html> element is the root element of an HTML page


 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph

HTML Headings
HTML headings are defined with <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading

HTML Paragraphs

HTML paragraphs are defined with <p> tags:

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with <a> tags:

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

The link's destination is specified in the href attribute.

HTML Images

HTML images are defined with <img> tags.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"

HTML Buttons
HTML buttons are defined with <button> tags:

Example
<button>Click me</button>

HTML Lists
HTML lists are defined with <ul> (unordered/bullet list) or <ol> (ordered/numbered list) tags,
followed by <li> tags (list items):
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

HTML Tables
An HTML table is defined with a <table> tag.
Table rows are defined with <tr> tags.
Table headers are defined with <th> tags. (bold and centred by default).
Table cells (data) are defined with <td> tags.

Example
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

Example
<p>This is a <br> paragraph with a line break.</p>
 <ul>- unordered list
 <li> list for bullets
 <hr> horizontal line
 <sol> order list
 <u> underline
 <i> italics
 <marquee> moving text from left to right
 <p> Defines a paragraph
 <hr> Defines a thematic change in the content
 <br> Inserts a single line break
 <pre> Defines pre-formatted text
 All HTML elements can have attributes
 The href attribute of <a> specifies the URL of the page the link goes to
 The src attribute of <img> specifies the path to the image to be displayed
 The width and height attributes of <img> provide size information for images
 The alt attribute of <img> provides an alternate text for an image
 The style attribute is used to add styles to an element, such as color, font, size, and
more
 The lang attribute of the <html> tag declares the language of the Web page
 The title attribute defines some extra information about an element
 Use the style attribute for styling HTML elements
 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment

HTML Formatting Elements


Formatting elements were designed to display special types of text:

<b> - Bold text


<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
Sample (with explanation)
<HTML> (imp for starting the html)

<HEAD> (The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag. 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)

<TITLE> Webpage-2:About Illness </TITLE> (The <title> tag defines the title of the
document. The title must be text-only, and it is shown in the browser's title bar or in the
page's tab.The <title> tag is required in HTML documents!)

</HEAD>

<BODY BGCOLOR = "#A9A9A9" TEXT = "BLACK" link = "peach" vlink = "red"> (The
<body> tag defines the document's body.The <body> element contains all the contents of an
HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.Note:
There can only be one <body> element in an HTML document. In this there is also trhe
background color included)

<H1 ALIGN = "CENTER"> Mental Illness VS Physical Illness </H1> (The <h1> to <h6>
tags are used to define HTML headings.<h1> defines the most important heading. <h6>
defines the least important heading. Note: Only use one <h1> per page - this should represent
the main heading/subject for the whole page. Also, do not skip heading levels - start with
<h1>, then use <h2>, and so on. The <center> tag was used in HTML4 to center-align text.

<HR SIZE = 5 COLOR = "#2F4F4F"> (The <hr> tag defines a thematic break in an HTML
page (e.g. a shift of topic). The <hr> element is most often displayed as a horizontal rule that
is used to separate content (or define a change) in an HTML page.)

<FONT COLOR = "BLACK" SIZE = 5 FACE = Over here the font & size of the marquee text
"Lucida Calligraphy" > (in yellow highlight) is being determined

<MARQUEE DIRECTION = "LEFT"> Mental Illness </MARQUEE> (The HTML marquee


tag, <marquee>, is a non-standard element that makes text or an image scroll automatically in
any direction.)

</FONT>

<HR SIZE = 5 COLOR = "#2F4F4F">

<MARQUEE>
<IMG SRC =
https://i.pinimg.com/originals/b6/a0/2d/b6a02d56e41d9f1676b6eeba46c1f94d.gif HEIGHT =
200 WIDTH= 200>
</MARQUEE>
<FONT COLOR = "BLACK" SIZE = 3 FACE = "TIMES NEW ROMAN" >
TYPES OF CLOUD COMPUTING <u><b> BASED ON SERVICE </U></B> :
( The <u> tag represents some text that is unarticulated and styled differently from normal
text, such as misspelled words or proper names in Chinese text. The content inside is
typically displayed with an underline. The <b> tag specifies bold text without any extra
importance.)

<UL type = square > (The <ul> tag defines an unordered (bulleted) list.Use the <ul>
tag together with the <li> tag to create unordered lists.)

<li> IaaS (Infrastructure as a service) The <li> tag defines a list item.
<li> SaaS (Software as a service) The <li> tag is used inside ordered lists(<ol>), unordered
<ol type = "i"> lists (<ul>), and in menu lists (<menu>).
<li>Google Doc In <ul> and <menu>, the list items will usually be displayed
<li>Google Sheet with bullet points.
<li>NETFLIX In <ol>, the list items will usually be displayed with
</ol> numbers or letters.
<li> PaaS (platform as a service)
</UL>

TYPES OF CLOUD COMPUTING BASED ON DEPLOYMENT :

<OL> (The <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical. The <li> tag is used to define each list item.)
<li> Private
<li> Public
<li> Hybrid
<li> Community
</OL>

<H2> Mental illness, also called mental health disorders, refers to a wide range of mental
health conditions — disorders that affect your mood, thinking and behavior. Examples of
mental illness include depression, anxiety disorders, schizophrenia, eating disorders and
addictive behaviors. </H2>

</FONT>
<CENTER> (this is to align the image to the centre)

<IMG SRC ="https://static.vecteezy.com/system/resources/previews/000/542/211/large_2x/


depression-people-affect-on-mental-health-vector-illustration.jpg" width="500" height="350"
BORDER = 5 >

</CENTER>
How People React to Mental Health

<table border = 3 bgcolor = "#5F9EA0" align= "centre" cellspacing = 5 cell padding = 3 >
<tr>
<th> sl. no </th>
<th> mental illness </th> The <table> tag defines an HTML
<th> physical illness </th> table.
</tr>
<tr> An HTML table consists of one
<th> 1. </th> <table> element and one or more
<td> the patient gets blamed in the society </td> <tr>, <th>, and <td> elements.
<td> the patient gets the doctors treatment </td>
</tr> The <tr> element defines a table
<tr> row, the <th> element defines a
<th> 1. </th> table header, and the <td>
<td> this is wrong </td> element defines a table cell.
<td> this is right </td>
</tr>
</table>
<a href = https://www.mayoclinic.org/diseases-conditions/mental-illness/diagnosis-
treatment/drc-20374974"> (The <a> tag defines a hyperlink, which is used to link from one
page to another.The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue. A visited link is underlined and purple. An active
link is underlined and red. if the <a> tag has no href attribute, it is only a placeholder for a
hyperlink.)

<IMG SRC ="https://static.vecteezy.com/system/resources/previews/000/542/211/


large_2x/depression-people-affect-on-mental-health-vector-illustration.jpg" width="500"
height="350" BORDER = 5 > ( over here the image is the one which is the hyperlink)

</a>

<br> (The <br> tag inserts a single line break.


The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag.)

<hr>
name:<INPUT TYPE">
<br> <br>
age:<input type="text"size=4 maxlength =2>
<br> <br>
D-O-B :<INPUT TYPE ="datetime">
<br><br>
gender:<input type="radio"name="R">male <input type="radio"name ="R">female
<br> <br>
activities:
<br> <br>
<input type="checkbox">sports The <input> tag specifies an input
field where the user can enter
data.

The <input> element is the most


important form element.
<input type="checkbox">music
<input type="checkbox">dance
<br>
<input type="checkbox">painting
<input type="checkbox">cooking
<input type="checkbox">Nss
<br><br>
city:
<select>
<option> kolkata
<option> Goa
<option> Ramchi
<option> Delhi
<option> Mumbai
<option> Patna
<option> Agra
<option> Chennai
<option> Hyderabad
<option> Pune
</select>

<br> <br>
Course preferences:
<br>
<select size=3>
<option> Fashion designing
<option> Arts
<option> Computer learning
<option> Interior designing
<option> Food and nutrition
</select>
<br><br>
<center>
<textarea rows=4 cols=100> comment if you have any query.........</textarea>

<br> <br>

<center>
<input type="submit">
<input type="reset">
<input type="button"value="save draft">

</BODY>

</HTML>
Full example:
<HTML>
<HEAD>
<TITLE> Webpage-2:About Illness </TITLE>
</HEAD>
<BODY BGCOLOR = "#A9A9A9" TEXT = "BLACK" link = "peach" vlink = "red">
<H1 ALIGN = "CENTER"> Mental Illness VS Physical Illness </H1>
<HR SIZE = 5 COLOR = "#2F4F4F">
<FONT COLOR = "BLACK" SIZE = 5 FACE = "Lucida Calligraphy" >
<MARQUEE DIRECTION = "LEFT"> Mental Illness </MARQUEE>
</FONT>
<HR SIZE = 5 COLOR = "#2F4F4F">
<MARQUEE>
<IMG SRC =
https://i.pinimg.com/originals/b6/a0/2d/b6a02d56e41d9f1676b6eeba46c1f94d.gif HEIGHT =
200 WIDTH= 200>
</MARQUEE>
<FONT COLOR = "BLACK" SIZE = 3 FACE = "TIMES NEW ROMAN" >
TYPES OF CLOUD COMPUTING <u><b> BASED ON SERVICE </U></B> :
<UL type = square >
<li> IaaS (Infrastructure as a service)
<li> SaaS (Software as a service)
<ol type = "i">
<li>Google Doc
<li>Google Sheet
<li>NETFLIX
</ol>
<li> PaaS (platform as a service)
</UL>

TYPES OF CLOUD COMPUTING BASED ON DEPLOYMENT :

<OL>
<li> Private
<li> Public
<li> Hybrid
<li> Community
</OL>

<H2> Mental illness, also called mental health disorders, refers to a wide range of mental
health conditions — disorders that affect your mood, thinking and behavior. Examples of
mental illness include depression, anxiety disorders, schizophrenia, eating disorders and
addictive behaviors. </H2>
</FONT>
<CENTER>
<IMG SRC ="https://static.vecteezy.com/system/resources/previews/000/542/211/large_2x/
depression-people-affect-on-mental-health-vector-illustration.jpg" width="500" height="350"
BORDER = 5 >
</CENTER>

How People React to Mental Health


<table border = 3 bgcolor = "#5F9EA0" align= "centre" cellspacing = 5 cell padding = 3 >
<tr>
<th> sl. no </th>
<th> mental illness </th>
<th> physical illness </th>
</tr>
<tr>
<th> 1. </th>
<td> the patient gets blamed in the society </td>
<td> the patient gets the doctors treatment </td>
</tr>
<tr>
<th> 1. </th>
<td> this is wrong </td>
<td> this is right </td>
</tr>
</table>
<a href = https://www.mayoclinic.org/diseases-conditions/mental-illness/diagnosis-
treatment/drc-20374974">

<IMG SRC ="https://static.vecteezy.com/system/resources/previews/000/542/211/


large_2x/depression-people-affect-on-mental-health-vector-illustration.jpg" width="500"
height="350" BORDER = 5 > </a>

<br>
<hr>
name:<INPUT TYPE">
<br> <br>
age:<input type="text"size=4 maxlength =2>
<br> <br>
D-O-B :<INPUT TYPE ="datetime">
<br><br>
gender:<input type="radio"name="R">male <input type="radio"name ="R">female
<br> <br>
activities:
<br> <br>
<input type="checkbox">sports
<input type="checkbox">music
<input type="checkbox">dance
<br>
<input type="checkbox">painting
<input type="checkbox">cooking
<input type="checkbox">Nss
<br><br>
city:
<select>
<option> kolkata
<option> Goa
<option> Ramchi
<option> Delhi
<option> Mumbai
<option> Patna
<option> Agra
<option> Chennai
<option> Hyderabad
<option> Pune
</select>

<br> <br>
Course preferences:
<br>
<select size=3>
<option> Fashion designing
<option> Arts
<option> Computer learning
<option> Interior designing
<option> Food and nutrition
</select>
<br><br>
<center>
<textarea rows=4 cols=100> comment if you have any query.........</textarea>

<br> <br>

<center>
<input type="submit">
<input type="reset">
<input type="button"value="save draft">

</BODY>
</HTML>

You might also like