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

SQL Thesis

Uploaded by

tecoc32207
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

SQL Thesis

Uploaded by

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

ABSTRACT

Singh, Nishant (GE


HealthCare)
HTML

HTML TUTORIAL
HTML TUTORIAL

HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages.

 Hypertext refers to the way in which Web pages (HTML documents) are
linked together. Thus, the link available on a webpage is called Hypertext.

 As its name suggests, HTML is a Markup Language which means you use
HTML to simply "mark-up" a text document with tags that tell a Web
browser how to structure it to display.

HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific
information between researchers.

Now widely used for the web development for creation of web pages.

History:

HTML was created by Sir Tim Berners-Lee in late 1991 but was not officially
released. It was published in 1995 as HTML 2.0. HTML 4.01 was published in late
1999 and was a major version of HTML. HTML 5 can be said for an extended
version of HTML 4.01, which was published in the year 2012.

HTML element is everything from the start tag to the end tag:

<tagname>We started html...</tagname>

Tags:

HTML is a markup language and makes use of various tags to format the
content. These tags are enclosed within angle braces. Except few tags, most of
the tags have their corresponding closing tags.
Tags with description:
HTML TUTORIAL

<!DOCTYPE> This tag defines the document type and HTML version.

<html> This tag encloses the complete HTML document and mainly
comprises of document header which is represented by ...
and document body which is represented by
...
tags.
<head> This tag represents the document's header which can keep
other HTML tags like

<title> The <title> tag is used inside the head to mention title of
the document

<body> This tag represents the document's body which keeps other
HTML tags

<meta> Defines metadata about an HTML document

<style> Tells about style information for a document

<div> Section of a document

<frame>

<layout>
HTML TUTORIAL

Some Points:

1. Pre-Tag: Text in a <pre> element is displayed in a fixed-width font, and


the text preserves both spaces and line breaks. The text will be displayed
exactly as written in the HTML source code.

<pre>
This is the demo for the pre tag texts that comes up with preformatting
tags
</pre>

pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}

2. Comments: This is how we provide comments in the HTML. Along with


comments code can also be commented.1

<! —Comment part goes here -->

3. Fonts: Fonts play a very important role in making a website more user
friendly and increasing content readability. The font tag is having three
attributes called size, colour, and face to customize your fonts.

<font face = "Times New Roman" size = "5">


This is the demo for the pre tag texts that comes up with
preformatting tags
</font>

This was used in HTML 4. Now HTML 5 we use directly style and provide
all the details.

<p style="font-family:'Courier New'">This is fonts alternative paragraph.


</p>

4. Attributes: They are nothing but extra information that will be added
change or enhance the behaviour of the elements.
a. Each element or tag can have attributes, which defines the
behaviour of that element.
b. Attributes should always be applied with start tag.
c. The Attribute should always be applied with its name and value
pair.
d. Multiple attributes can be added in one tag.
HTML TUTORIAL

<element attribute_name="value">content</element>
<img src="whitepeacock.jpg" height="400" width="600">
<p title="This is paragraph tag">Just another example </p>
5. Links: This tag can be used when you want to link external style sheets to
your current page.

<link rel="stylesheet" href="styles.css">


6. Images and Image Links: We can insert image in our document and add
the links to the that image.
Adding image in the page:

<img src="smiley.gif" alt="HTML tutorial" style="width:42px;


height:42px;">
Adding links in the page:

<a href="google.com">Go to Google</a>


Adding links to image:

<a href="google.com" target="_blank" >


<img src=" " alt="Test the Image " style="width:42px; height:42px;">
</a>

7. Color, Color Codes, Charts: We can choose different colour for our
pages either for decoration of texts or background of any part of the page.
There is Color code associated to each Color so that we can easily use that.

For Example: White - #FFFFFF, Black - #000000

Links For the Color: https://htmlcolorcodes.com/

<h1 style="color: Black;">Black Heading</h1>


<p style="color: "#FFFFFF">White Paragraph </p>

8. Lists: This will give the developer a way to show the data in grouped
manner. If some data need to be grouped and shown, then list is preferred
way to show the content.
There are different kinds of list:
a. Unordered List: List will be shown in bullets.

<ul>
<li>Cricket</li>
<li>Football</li>
<li>Tennis</li>
</ul>

b. Ordered List: List will be shown as numbered.


HTML TUTORIAL
<ol>
<li>Besent</li>
<li>JS</li></ol>

c. Description List: It provides the description of each element.


<dl>
<dt>FIFA</dt>
<dd>- Related to Football</dd>
<dt>WC2023</dt>
<dd>- Related to Cricket</dd></dl>

Form:

It is way to collect different data from user or from any source with interactive
controls. Its facilities to input text, number, values, email, password, and
control fields such as checkboxes, radio buttons, submit buttons, etc

Some common fields of form:

 <label>: It defines label for <form> elements.


 <input>: It is used to get input data from the form in various types
such as text, password, email, etc by changing its type.
 <button>: It defines a clickable button to control other elements or
execute a functionality.
 <select>: It is used to create a drop-down list.
 <textarea>: It is used to get input long text content.
 <fieldset>: It is used to draw a box around other form elements and
group the related data.
 <legend>: It defines a caption for fieldset elements.
 <datalist>: It is used to specify pre-defined list options for input
controls.
 <output>: It displays the output of performed calculations.9809
 <option>: It is used to define options in a drop-down list.
 <optgroup>: It is used to define group-related options in a drop-
down list.
 Reset: It I used to reset the whole form to initial value.
 Upload: This should be type as file to enable upload

Basic example of the form:

<form action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="Nishant"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname value="Singh"><br><br>
<input type="submit" value="Submit">
</form>
HTML TUTORIAL
Extra form example will be provided to execute all of the form functionality.

HTML 5:

1. Audio and Video tag: Audio and Video tags are the two major
addition to HTML5. It allows developers to embed a video or audio on
their website.

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="data.mp3" type="audio/mpeg">
Browser unsupported.
</audio>

2. Aside: It is side content wherever it is placed in such that it does not


appear in the same context.
<aside>
<p>This will be side content of the page. </p>
</aside>

3. Header and Footer: Header can be used for introduction content or


the nav bars. Footer for last content or copyright.

<header>
<h1>H1 header </h1>
<p>Introduction here</p>
</header>

4. Mark: This tag is there to mark a particular part of the content


bydefault it is marked in yellow.
<p>Please complete the <mark>assignment </mark> message. </p>

5. Nav: This defines the multiple navigational links, kind of grouping of


navigational links.
<nav>
<a href="google.com">GOOGLE</a> |
<a href="youtube.com">Youtube</a> |
<a href="twitter.com">Twitter</a>
</nav>

6. Progress: It represents the completion of a particular activity.

<label for="file">Downloading Started:</label>


<progress id="file" value="59" max="100"> 59% </progress>

7. Section: Mainly added this tag to separate the page in different


sections.
HTML TUTORIAL

<section>
<h2>Cricket</h2>
<p>Cricket is a game played since early 1800. It is global game and
cricket wc is organized every 4 years. </p>
</section>

<section>
<h2>JavaScript</h2>
<p>A global language that is used for the front-end development
mainly. It is scripting language and supported by all major browsers
</p>
</section>

8. Summary: This tag is used with details tag that comes up with the
drop down when executed.

<details>
<summary>JS</summary>
<p>A global accepted language for the browsers and the front-end
development. </p>
</details>

9. Time: Very specific to the time format it formats and shows the data in
time format.

<p>I have a class to attend on<time datetime="28-10-14 20:00">


day</time>. </p>

Form Input and Attributes:

1. Color: This input type is used to take input as colour codes if


required from form.
<input type="color">
2. Date: This input type is used to take input as date if required from
form.
<input type="date">
3. Password: This input type is used to take password in dotted form
for security reasons.
<input type="password">
4. Hidden: This input type to hide the data from the user but will be
taken in consideration when submitted form.
<input type="hidden">
5. File: It will give option to select file from the system for upload
<input type="file">

6. Time: It will used when we want the data input as time.


<input type="time">
HTML TUTORIAL
7. Week: It will give option to select week of the year.
<input type="week">
8. Number: It will take input in form of number only. Other than
number input will give error while submitting.
<input type="number">
9. Range: It will give a rage selector if the form with minimum value
and maximum value as well as step tells in one go how much it will
increase.
<input type="range" min=’10’, max=’100’ step=’10’>
10.Search: It will create a search field with a text box.
<input type="search">
11.Url: It will create a field that will validate the url whether entered
data is url or not.
<input type="url">

Attributes:

HTML form attributes are used to provide additional information and behaviour to
HTML forms. Here are some commonly used form attributes:

1. `action`: Specifies the URL or file name where the form data will be
submitted when the form is submitted.

Example: `<form action="/submit-form" method="post">`

2. `method`: Specifies the HTTP method to be used when submitting the form
data.

Example: `<form action="/submit-form" method="post">`

3. `name`: Specifies a name for the form.

Example: `<form name="myForm">`

4. `autocomplete`: Specifies whether the browser should autocomplete form


values.

Example: `<form autocomplete="on">`

5. `enctype`: Specifies the encoding type to be used when submitting the form
data to the server. Common values include `application/x-www-form-
urlencoded`, `multipart/form-data`, and `text/plain`.

Example: `<form enctype="multipart/form-data">`

6. `target`: Specifies the name or ID of the target window or frame where the
form response should be displayed.

Example: `<form target="_blank">`


HTML TUTORIAL
7. `novalidate`: Specifies that the form should not be validated by the browser.

Example: `<form novalidate>`

8. `required`: Specifies that a form control must be filled out before submitting
the form.

Example: `<input type="text" required>`

9. `placeholder`: Specifies a short hint that describes the expected value of an


input field.

Example: `<input type="text" placeholder="Enter your name">`

10. `readonly`: Specifies that an input field should be read-only and cannot be
edited by the user.

Example: `<input type="text" readonly>`

11.formaction`: The term "formaction" is an attribute used in HTML forms to


specify the URL where the form data should be submitted when the form is
submitted. The "formaction" attribute overrides the "action" attribute of the form
for a specific submit button.

<form action="/default-action" method="post">

<! -- form fields go here -->

<input type="submit" value="Submit" formaction="/alternative-action">

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

</form>

12. `formenctype`: The term "formenctype" is an attribute used in HTML forms


to specify the encoding type for the form data before it is sent to the server upon
submission. The "formenctype" attribute works in conjunction with the "method"
attribute, which determines the HTTP method used for the form submission.

The most commonly used values for the "formenctype" attribute are:

a. . "application/x-www-form-urlencoded" (default): This is the default value if


the "formenctype" attribute is not specified. With this encoding, the form
data is URL-encoded before being sent to the server. This is the standard
encoding for form data submission.

b. "multipart/form-data": This encoding is used when the form data contains


binary data, such as file uploads. It allows the form data to be sent as a
series of parts, each containing a separate form field and its
HTML TUTORIAL
corresponding value. This encoding is typically used when you have a file
input field in your form.

c. "text/plain": This encoding sends the form data as plain text without any
additional encoding. This encoding is rarely used in practice.

<form action="/submit-form" method="post" enctype="multipart/form-


data">

<! -- form fields go here -->

<input type="file" name="file">

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

</form>

TABLE:

In HTML, the <table> element is used to create tables. Tables are used to
display data in a structured grid format with rows and columns. Here's an
example of how to create a basic table structure in HTML.

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Nishant Singh</td>
<td>24</td>
<td>Instructor</td>
</tr>
<tr>
<td>Nitish </td>
<td>34 </td>
<td>Cricketers</td>
</tr>
</table>
HTML TUTORIAL

You might also like