The document provides an introduction to basic HTML elements and tags. It explains the structure of an HTML document with the <html>, <head>, and <body> tags. It describes common page elements like the <title>, headings (<h1>-<h6>), paragraphs (<p>), and horizontal rules (<hr>). It also covers how to change text formatting with font tags and attributes for color, size, bold, italics. Additionally, it discusses how to add links, images, lists, tables, and special characters to an HTML page.
The Internet is growing at an incredible pace, and we want everybody to be a part of this growth. Basic HTML was created for the beginner to learn about designing web pages from the ground up and for the advanced web designers that want to revise a few HTML tricks.This downloadable tutorial is designed to help you learn about HTML and web page design.
The Internet is growing at an incredible pace, and we want everybody to be a part of this growth. Basic HTML was created for the beginner to learn about designing web pages from the ground up and for the advanced web designers that want to revise a few HTML tricks.This downloadable tutorial is designed to help you learn about HTML and web page design.
Code This, Not That: 10 Do's and Don'ts For Learning HTMLHubSpot
As a marketer, you craft blog posts, publish landing pages, and send email campaigns. While you may not be a webmaster, having a few HTML tricks up your sleeve can make you more agile and efficient, without having to rely on a webmaster's help.
This PPT is about the basic structure of HTML5 where you can learn how to create the basic structure and layout of any website.
Different tags of HTML5 has been used as well as some simple keywords which are used as an alternate of tags.
Code This, Not That: 10 Do's and Don'ts For Learning HTMLHubSpot
As a marketer, you craft blog posts, publish landing pages, and send email campaigns. While you may not be a webmaster, having a few HTML tricks up your sleeve can make you more agile and efficient, without having to rely on a webmaster's help.
This PPT is about the basic structure of HTML5 where you can learn how to create the basic structure and layout of any website.
Different tags of HTML5 has been used as well as some simple keywords which are used as an alternate of tags.
Data Structure, Algorithm , Asymptotic notation, Pointers, Dynamic memory allocation, recursion, time and space complexity and trade-off, array and linked list with its operations.
Web engineering UNIT V as per RGPV syllabusNANDINI SHARMA
E- Commerce, E-commerce Business Models, The Internet and World Wide Web: E-commerce
Infrastructure, Building an E-commerce Web Site , Electronic Commerce environment and opportunities. Modes of Electronic Commerce, Approaches to safe Electronic Commerce, Electronic Cash and Electronic Payment Schemes ,Online Security and Payment Systems, Ecommerce Marketing Concepts, Advertising on the Internet: issues an Technologies, Ecommerce Marketing Concepts Electronic Publishing issues, approaches, legalities and technologies ,Privacy and Security Topics: Introduction, Web Security , Encryption schemes, Secure Web document, Digital Signatures and Firewalls, Cyber crime and laws, IT Act.
Web Engineering UNIT III as per RGPV SyllabusNANDINI SHARMA
Technologies for Web Applications: HTML and DHTML, HTML Basic Concepts, Static and dynamic HTML, Structure of HTML documents, HTML Elements, Linking in HTML, Anchor Attributes, Image Maps, Meta Information, Image Preliminaries, Layouts, Backgrounds, Colors and Text, Fonts, Tables, Frames and layers, Audio and Video Support with HTML Database integration, CSS, Positioning with Style sheets, Forms Control, Form. Elements. Introduction to CGI PERL, JAVA SCRIPT, PHP, ASP , Cookies Creating and Reading Cookies
Number System, Positional and non-positional number system, conversion number system from binary to another base and vice versa, decimal to another base and vice versa, convert another base than 10 to another base than 10, binary arithmetic operation such as binary addition, subtraction, multiplication, division
Basic Computer Engineering Unit II as per RGPV SyllabusNANDINI SHARMA
Algorithm, Flowchart, Categories of Programming Languages, OOPs vs POP, concepts of OOPs, Inheritance, C++ Programming, How to write C++ program as a beginner, Array, Structure, etc
Web engineering UNIT IV as per RGPV syllabusNANDINI SHARMA
Technologies for Web Applications: Introduction of XML, Validation of XML documents, DTD, Ways to use XML, XML for data files, HTML Vs XML, Embedding XML into HTML documents, Converting XML to HTML for Display, Displaying XML using CSS and XSL, Rewriting HTML as XML, Relationship between HTML, SGML and XML, web personalization , Semantic web,
Semantic Web Services, Ontology.
Data Link Layer, Error correction and detection like LRC, VRC, CRC, checksum and Hamming coding, Data link protocols, stop and wait ARQ, sliding window ARQ, Petrinet models, HDLC, etc
Fundamental of Computer, Types of computer, Bus, registers, Memory of computer, Instruction set, Operating system, functions of OS, Types of OS. study of Microsoft office word, power-point, excel etc
In Class Assignment 1 WebServices-CSET3200
September 28th, 2016
HTML & CSSWhat is Bootstrap?
· Bootstrap is a free front-end framework for faster and easier web development
· Bootstrap includes HTML and CSS based design templates for forms, buttons, tables, navigation, and many other, as well as optional JavaScript plugins
· Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive web design is about creating web sites, which automatically adjust themselves to look good on all devices, from small phones to large desktops.
Why Use Bootstrap?
Advantages of Bootstrap:
· Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
· Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
· Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
· Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web site.
You can:
· Download Bootstrap from getbootstrap.com
· Include Bootstrap from a CDN
· There are several templates available including Portfolio Template.
Quick Reminders:
* Browser opens the index page as the homepage automatically.
Three quick points before we go on to the next lesson:
1. What you made in lab 1 and 2 is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components.
2. The document title is what appears at the very top of the browser window.
3. Of all the things on your web page, the title is what search engines consider most when ranking a page. Choose your titles carefully, and keep them brief.
IMPORTANT NOTE: Whenever you make a change to your document, just save it, then hit the Refresh/Reload button on your browser. In many instances, just hitting the refresh button does not quite do the trick.
Agenda:
Today we will see and document the output/results we get after writing these code snippets and different exercises.
The aim of today’s lab is to be able to communicate your concept in a technical manner using the technical terminologies, in addition to learning new skill set. You can earn up to 30 points at the completion of this lab.
In case you find it extremely hard to express a specific outcome in words, then you are allowed to take a screen shot of the outcome and submit it in your document. However, there is a limit to screen shots. You can add a maximum of 7 images for this lab.
Introduction to Nav Area:
1. In an html file, add the following snippets in the body section.
2. Add the following for Styling:
3. State the major differences you have noticed so far.
<body bgcolor="#ccffcc">
Something really cool
</body>
#ccffcc is computerese (the symb.
HTML Lab ProjectTo create a simple web page you will need .docxadampcarr67227
HTML Lab Project
To create a simple web page you will need to use a text processor (Notepad) and HTML (hypertext markup language). Do NOT use Word which can create some problems by automatically formatting your work as a web page.
The tags (items enclosed in < >) from HTML create the special effects that are seen on web pages when using a browser like Internet Explorer.
Note: some tags require a starting and ending tag. For example: <h1>This is my home page </h1>
Also if multiple tags are used to format a single item, ending tags must be written in reverse order from the starting tags.
Example:
<h1><center> My First Home Page </center></h1>
tag1 tag2 endtag2 endtag1
After completing the steps in the tutorial, you should be able to:
1. Create a Home Page using HTML
2. Create headings
3. Place text and graphics in an HTML document
4. Use attributes such as font color with tags
5. Create links to other places or documents
Home Pages
The home page of a web site is the starting point that usually describes the purpose of the web site and its categories. The page typically includes hyperlinks which will take the viewer to other web sites or other places within the same web site. In planning a home page consider these items
· Title – this text will appear on the blue title bar of your web page
· Headings – customarily the first heading is the same as the title; it appears as the first line of your home page. Each browser displays headings in a unique way, but they allow several levels of headings from H1 to H6. Heading 1 would be the largest, most noticeable, heading 6 the smallest. In the examples that follow, the first line of each pair shows the HTML tags; the second line is the effect produced.
<h1>H1 headings</h1>
H1 headings
<h2> H2 headings</h2>
H2 headings
<h3>H3 headings</h3>
H3 headings<h4> H4 headings</h4>
H4 Headings
<h5> H5 headings</h5>
H5 Headings
<h6>H6 headings</h6>
H6 Headings
Content - Text that explains your home page or special features of the page.
Create a Sample HTML Page
Step 1.
A. Open Notepad (Click on Start, Programs, Accessories, Notepad).
B. Enter the following text:
<html>
<head>
<title>Your Name Home Page</title>
</head>
<h1>Your Name Home Page </h1>
</html>
C. Choose File, Save As. For the file name, use mysample_Lastname_Firstname.htm in Save As Type, choose All Files, and save to your desktop, or other easy to find location.
(CAUTION: if you neglect to choose All Files, this will be saved as a text file, ending in txt, and will not be available for opening in your browser.
Step 2.
A. Start your browser (Internet Explorer). It is not necessary to be online.
B. From the menu bar, choose File, Open.
C. Browse for the file you just saved on your desktop (mysample_firstname_lastname.htm).
D. Choose Open.
E. You should see only the title bar and a heading on your newly created homepage.
Step 3.
A.
Web Designing Training in Ambala ! BATRA COMPUTER CENTREjatin batra
Are you in search of Web Designing training in Ambala?
Now your search ends here... Batra Computer Centre provides you the best training in Ambala Cantt. We provide training in Basics of Computers, training in Programming Languages C, C++, HTML, PHP,Web Designing,WebDevelopment,Seo,Smo and training many other courses also provided here.
Following are the some notes regarding HTML.It will provide you a basic insight in HTML and web designing.
For further, contact us -http://nextgenr.com/
1. Basic HTML Tutorial
by Robert Frank, Team 358
HTML Structure
HTML, or hypertext markup language, is very simple to learn and very simple to use. HTML is used in most
modern websites. HTML has two basic forms:
<name attribute1="value1" attribute2="value2">Content of 'name'</name>
and
<name attribute1="value1" attribute2="value2">
After you learn the basic form of HTML, you are ready to do some HTML coding. And just so you know, the
capitalization of the name's of the basic structure and the attributes does not matter, while the capitalization of the
values and contents of them do.
HTML pages always start with a DTD, or document type definition. This allows the web-browser to determine what
type of HTML you are using as well as what language the characters are in. The type of DTD that I would
recommend is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
After the DTD, you would continue with the HTML tag, like so:
<HTML>
...
</HTML>
HTML pages are broken into two main sections: the HEAD and the BODY, both contained within the HTML tags.
The head contains the title and sometimes meta tags. The body contains the main page that everyone sees. A typical
website looks something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
Page Title
The title is the most important element of a quality web page. The title allows people to know what they are visiting
and represents the page. When search engines add your website to their database, they add the title as what you see
when searching for what you want. Page titles are very useful for letting your guests know just what is on you
website. There can only be one title per page, so only the first code read containing the title will be shown. In order
to add a title use the following code:
<TITLE>this is the title</TITLE>
Please note that this is one of the tags that will go within the HEAD tags. Here is an example of a web page:
2. Simple Headings
There are six different simple headings that can be used (H1 to H6). Many websites use headings. You can use the
following code to make headers.
<H1>This is the Heading</H1>
<H2>This is the Heading</H2>
<H6>This is the Heading</H6>
Of the six different headings, <H1> produces the biggest, and <H6> produces the smallest. You can also center the
headings by using the align attribute, as you can see here:
<H1 ALIGN="center">This is the centered Heading</H1>
Paragraphs
Paragraphs are very useful and should be used. They can be created by using the following code:
<P>This is a paragraph.</P>
<P>This is a second paragraph.</P>
New Lines/Spacing
New lines are very important for making any website. In order to create a new line you would add the following
code:
<BR>
Spacing is also very important. When using HTML, you can use just a space, but only up to the first space. Beyond
the first space, the web-browser will just ignore. In order to do any amount, you must use the following code for
each space wanted:
Horizontal rules
Horizontal lines can be added by doing the following code:
<HR>
You can also change the width of the line as well as align them to the left or right, as can be seen here:
<HR ALIGN="left" WIDTH="50%">
Please note that you can have the width in pixels instead of percentages as well. You can also change the height in
pixels by doing the following:
<HR SIZE="5">
Comments
Comments are very useful for people that want to identify things in their HTML. They are used when multiple
people update website. They are also used to "block" the HTML code. The user does not see a comment unless they
view the source code. You can add a comment by doing the following:
<!-- This is the comment -->
3. Changing Font Color/Face/Size
Changing the font color, face and size are all relatively simple, and are all contained within the same HTML
function. In order to just change the color, you can do the following:
<FONT COLOR="red">This is the text that the color applies to</FONT>
This is the text that the color applies to
Within the color field you may name a color, as shown, or you may use the HEX code of the color, which is the
preferred method, as seen below:
<FONT COLOR="#FF0000">This is the text that the color applies to</FONT>
This is the text that the color applies to
The color in hex code has a lot more ability and I would recommend that you use it so that you can have a unique
website. The hex code of red then green and blue, all up to 255 but in hexadecimal code. Please note that not all
monitors display all colors.
Changing the face of a font is also very simple and useful. You can change the face of the font to whatever font you
wish, but be careful, if a user does not have that font installed on their computer, then it will just show the default
font. You can change the face by using the following code:
<FONT FACE="Webdings">This is the text that it applies to</FONT>
Because people may not have the specific font type that you want it is a good idea to have backup font types
separating them by commas, as seen here:
<FONT FACE="BobsFont,Wingdings,Times New Roman,Times,Courier New">This is the text that it applies
to</FONT>
You can change the font size using two basic methods. You can do it by using the size attribute, or by using the style
attribute. The code for the size attribute:
<FONT SIZE="5">This is the text that it applies to</FONT>
This is the text that it applies to
Using this method, you can change the font from 1 to 7. I would not recommend this method. You could also make
the font change, compared to what it was right before as can be seen here:
<FONT SIZE="+2">This is the text that it applies to</FONT>
This is the text that it applies to
As you can notice the font size increased by two font sizes from what it was right before. You can go from -7 to +7,
where the -7 decreases the font size by seven and the positive increases it by seven. Another method of changing the
font size it by using the following:
<SMALL>The small text<SMALL>
The small text
<BIG>The big text<BIG>
The big text
The more commonly seen font size can be changed by using the font style attribute. You can use this code for
modifying that:
<FONT STYLE="Font-Size:20px;">This is the text that it applies to</FONT>
This is the text that it applies to
By using this, you can easily modify the font size from 1 and on. this is what most programs and websites use as
their font size.
Bolding/Italicizing/Underlining/Striking
You may also want to bold, italicize, or underline some of you website. It is very good for making things stand out.
You can bold something using the following code:
<B>This is the text that it applies to</B>
This is the text that it applies to
4. Or you may bold by doing the following:
<STRONG>This is the text that it applies to</STRONG>
This is the text that it applies to
Or you may italicize using the following:
<I>This is the text that it applies to</I>
This is the text that it applies to
And another way to italicize is:
<EM>This is the text that it applies to</EM>
This is the text that it applies to
Or you may underline using the following:
<U>This is the text that it applies to</U>
This is the text that it applies to
Or you may strikethrough text by using the following:
<STRIKE>This is the text that it applies to</STRIKE>
This is the text that it applies to
Making Links
Links are extremely useful for bringing the user to another page that may be within your website, or may be another
website that you think would be useful to others. You can create a simple link using the following code:
<A HREF="tutorials.php">This is the text that it applies to</A>
This is the text that it applies to
There are several different types of links, for local pages, you would use something like the above. For links to other
sites, you may use something like the following:
<A HREF="http://bobbys.us/tutorials.php">This is the text that it applies to</A>
This is the text that it applies to
There are many different things that you can do besides just simple links, but this is still very useful.
Making Links in new windows
You may occasionally need to open a new window for the user because you may not want them to leave you website
or another reason. Many people these days do not like new windows though, and will just block all new windows. In
fact in many 'top ten website mistakes', people place having new windows within the list. But if you want to make
new windows, you can use the following code:
<A HREF="http://bobbys.us/tutorials.php" TARGET="_BLANK">This is the text that it applies to</A>
This is the text that it applies to
Making Links to email addresses
Many times you may also want to have a link to your email address. I personally do not like the method and would
recommend using a script to send the mail for you, but it is always a good thing to know. To add a link to ayou can
use the following code:
<A HREF="mailto:admin@bobbys.us">E-mail me</A>
E-mail me
Please be warned, it is dangerous to place your email address like this, there are many crawlers out there just looking
for emails like this. Once crawlers collect emails, lists are sold to spammers. This is how many people get a lot of
spam.
6. be guided by. Here is an example of an ordered list:
<OL>
<LI>Item one</LI>
<LI>Item two</LI>
<LI>Item three</LI>
</OL>
1. Item one
2. Item two
3. Item three
There are also different types of ordered lists. Here is an example of a specific type of ordered list:
<OL TYPE="I">
<LI>Item one</LI>
<LI>Item two</LI>
<LI>Item three</LI>
</OL>
I. Item one
II. Item two
III. Item three
The 'TYPE' attribute can contain one the following types: 1, a, A, i, or I.
Unordered lists are similar to ordered lists, except that they have bullets instead of numbers. Here is an example of
an unordered list:
<UL>
<LI>Item one</LI>
<LI>Item two</LI>
<LI>Item three</LI>
</UL>
• Item one
• Item two
• Item three
Tables
Tables are used in many websites. Although they are not always seen, tables are very good at aligning certain things.
In fact, this website uses tables, but you probably cannot see them. Tables have many attributes that can be modified
to fit exactly what you want. Simple tables can be added by doing the following:
<TABLE BORDER="1">
<TR>
<TD>top left</TD>
<TD>top right</TD>
</TR>
<TR>
<TD>bottom left</TD>
<TD>bottom right</TD>
</TR>
</TABLE>
top left top right
bottom left bottom right
Here is what it would look like without a border:
<TABLE>
7. <TR>
<TD>top left</TD>
<TD>top right</TD>
</TR>
<TR>
<TD>bottom left</TD>
<TD>bottom right</TD>
</TR>
</TABLE>
top left top right
bottom left bottom right
You can simple add more rows by adding another <TR> with the columns. Here is an example with five rows:
<TABLE BORDER="1">
<TR>
<TD>top left</TD>
<TD>top right</TD>
</TR>
<TR>
<TD>row 2 - left</TD>
<TD>row 2 - right</TD>
</TR>
<TR>
<TD>row 3 - left</TD>
<TD>row 3 - right</TD>
</TR>
<TR>
<TD>row 4 - left</TD>
<TD>row 4 - right</TD>
</TR>
<TR>
<TD>bottom left</TD>
<TD>bottom right</TD>
</TR>
</TABLE>
top left top right
row 2 - left row 2 - right
row 3 - left row 3 - right
row 4 - left row 4 - right
bottom left bottom right
You can also add columns by just adding a <TD> in each of the rows. Here is an example:
<TABLE BORDER="1">
<TR>
<TD>top left</TD>
<TD>top - column 2</TD>
<TD>top - column 3</TD>
<TD>top right</TD>
</TR>
<TR>
<TD>bottom left</TD>
<TD>bottom - column 2</TD>
<TD>bottom - column 3</TD>
<TD>bottom right</TD>
8. </TR>
</TABLE>
top left top - column 2 top - column 3 top right
bottom left bottom - column 2 bottom - column 3 bottom right
<TH> can be used instead of <TD>. The difference between the two is that TH is bolded and centered, whereas TD
is left aligned and unbolded. There are also many more attributes for each column and row as well as the tables.
Much more...
There are also many more attributes and elements that I did not cover. You can visit http://www.w3.org/ to find all
of the types of elements, now that you know the basics of HTML. One good HTMl cheatsheet is located at
http://www.webmonkey.com/. And of course, look at what people have done on their website, by going to 'View
Source,' it is a great way to learn HTML code.
Validity of your page
When you are done making your page, it is a good idea to make sure that it is valid. w3.org has created an online
website validator. You can find their validator here: The W3C Markup Validation Service