digital describe

1
HTML PERSENTATION

• SHALINI SINGH

DIGITAL DESCRIBE
2
INTRODUCTION FOR HTMLSTRUCTURE OF
HTMLBASIC HTML TAGSVERSION OF HTML DOCTYPE
DECLARATIONHTML HEADINGTEXT FORMATINGHTML
LINKHTML IMAGEHTML TABLESHTML INPUT TAGSEXTRA
MARKUPSCSS
CONTENTS
3
INTRODUCTION OF HMTL

• WITH HTML you can creat yur own web site .
• HTML STANDS FOR HYPER TEXT MARKUP LANUGAGE.
• HTML is not a programming language,it is a MARKUP
  LANGUAGE.
• A MARKUP LANGUAGE IS SET OF MARKUP TAGS.
• HTML use to markup tags to describe web pages.
• HTML is not case sensitive language.
• HTML documents contain html tags and plain text.

4
HTML Elements and tags

• A tag is always enclosed in angle bracket
• ltgtlike ltHTMLgt
• HTML tags normally come in pairs
  likeltHTMLgtandlt/HTMLgt i.e.
• Start tagltHTMLgt
• END tagslt/HTMLgt
• Start and end tags are also called opening tags
  and closing tags.

5
HOW TO START

• Write hmtl code in notpad.
• Save the file name.(HTML)/(.HTM)extension.
• View the page in any web browser viz.
• Internet explorer Netscape navigator etc.
• The purpose of a web browser (like internet
  explorer or firefox)is to read html doucments and
  display them a web pages.

6
Code with HTML

• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• MY FIRST PAGE
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

7
TYPES OF HTML TAGS

• There are two types of different tags_gt
• Container elements
• Start tagsend tags.lthtmlgtlt/htmlgt
• Empty elements_gt
• Start tag i.eltBRgt

8
Text formatting tags

• Heading elements
• There are six heading elements
• lth1gt
• lth2gt
• lth3gt
• lth4gt
• lth5gt
• lth6gt
• ltH1gt will be largest heading.
• lth6gt will be smallest heading.

9
Result of heading code
10
Html paragraph tag

• Paragraphs are defined with the ltpgt tag.
• ltpgt this is a paragraphlt/pgt
• ltpgt this is anotherparagrphlt/pgt
• ltpregt this is text is performatted lt/pregt

11
HTML Formatting Elements

• ltstronggt - Important text
•  ltbgt - Bold text
• ltigtItalic text
• ltemgt - Emphasized text
• ltmarkgt - Marked text
• ltsmallgt - Smaller text
• ltdelgt - Deleted text
• ltinsgt - Inserted text
• ltsubgt - Subscript text
• ltsupgt - Superscript text

ltigt Showcases italicized text.
ltsmallgt Renders text in a smaller font size.
ltinsgt Highlights added or inserted text.
ltsubgt Creates subscript text.
ltstronggt Emphasizes text with importance, often in bold.
ltbgt Displays text in a bold format.
ltmarkgt Accentuates text with a background highlight.
ltdelgt Strikes through text to signify deletion.
ltemgt Adds emphasis to text, commonly styled as italic.
ltsupgt Formats text as superscript.
12
Text formatting code
lt!DOCTYPE htmlgt lthtml lang"en"gt ltheadgt
ltmeta charset"UTF-8"gt lttitlegtText Formatting
Examplelt/titlegt lt/headgt ltbodygt ltpgt
ltstronggtStronglt/stronggt This text is
important and bold. lt/pgt ltpgt
ltemgtEmphasizedlt/emgt This text is
emphasized and italic. lt/pgt ltpgt
ltbgtBoldlt/bgt This text is bold.
lt/pgt ltpgt ltigtItaliclt/igt This
text is italic. lt/pgt ltpgt
ltmarkgtMarkedlt/markgt This text is
highlighted. lt/pgt lt/bodygt lt/htmlgt
13
Font tags
The HTML ltfontgt Tag plays an important role in
the web page to create an attractive and readable
web page. The font tag is used to change the
color, size, and style of a text and it was used
in HTML4. The base font tag is used to set all
the text to the same size, color, and
face. Note Font tag is not supported in HTML5 
ltfont attribute "value"gt Content lt/fontgt
ltp style"colorgreen"gtGeeksforGeeks is a leading
platformlt/pgt
14
lt!DOCTYPE htmlgt lthtmlgt ltbodygt lt!--HTML
font color tag starts here--gt ltfont
color"009900"gtGeeksforGeekslt/fontgtltbr /gt
ltfont color"green"gtGeeksforGeekslt/fontgt
lt!--HTML font color tag ends here--gt lt/bodygt lt/ht
mlgt
15
Background text color tag html

• There are a couple of properties you can use to
  define color HTML background-color and
  HTML color.
• As the name suggests,the first one is used to
  change the color of the background.
• By using the simple color property, you will
  change the color of the text.
• Both HTML background color and color properties
  can take values defined in
•  names, RGB, RGBA, HEX, HSL or HSLA values.

ltbody bgcolor"def28d"gt lth2 style"color
731768"gt I am using HEX codes to assign colors
to this text and to the whole document lt/h2gt
Note added in the ltbodygt section,
the bgcolor attribute does not support RGB
values. Use either a color name or a HEX value.
16
Hyperlinks tags

• 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.

lt!DOCTYPE htmlgt lthtmlgt ltbodygt lth1gtHTML
Linkslt/h1gt ltpgtlta href"https//www.google.comgtVis
it google.com!lt/agtlt/pgt lt/bodygt lt/htmlgt
Note A link does not have to be text. A link can
be an image or any other HTML element!
17
HTML Links - The target Attribute

• By default, the linked page will be displayed in
  the current browser window. To change this, you
  must specify another target for the link.
• The target attribute specifies where to open the
  linked document.
• The target attribute can have one of the
  following values
• _self - Default. Opens the document in the same
  window/tab as it was clicked
• _blank - Opens the document in a new window or
  tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the
  window

lt!DOCTYPE htmlgt lthtmlgt ltbodygt lth2gtThe target
Attributelt/h2gt lta href"https//www.google.com/"
target"_blank"gtVisit W3Schools!lt/agt ltpgtIf
target"_blank", the link will open in a new
browser window or tab.lt/pgt lt/bodygt lt/htmlgt
The target Attribute Visi google.com!If
target"_blank", the link will open in a new
browser window or tab.
18
Use an Image as a Link
To use an image as a link, just put the ltimggt tag
inside the ltagt tag
lt!DOCTYPE htmlgt lthtmlgt ltbodygt lth2gtImage as a
Linklt/h2gt ltpgtThe image below is a link. Try to
click on it.lt/pgt lta href"default.asp"gtltimg
src"smiley.gif" alt"HTML tutorial"
style"width42pxheight42px"gtlt/agt lt/bodygt lt/ht
mlgt
Image as a Link The image below is a link. Try to
click on it.       

• shalini

19
image attributes in html
Attribute Value Description
alt text Specifies an alternate text for an image
crossorigin anonymoususe-credentials Allow images from third-party sites that allow cross-origin access to be used with canvas
height pixels Specifies the height of an image
ismap ismap Specifies an image as a server-side image map
loading eagerlazy Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
longdesc URL Specifies a URL to a detailed description of an image
referrerpolicy no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url Specifies which referrer information to use when fetching an image
sizes sizes Specifies image sizes for different page layouts
src URL Specifies the path to the image
srcset URL-list Specifies a list of image files to use in different situations
usemap mapname Specifies an image as a client-side image map
width pixels Specifies the width of an image
20
Html table tags
21
Code of table
22
Html list tag
23
List of tag code
24
Inputs tag
25
Css cascading style sheet
26
Css slectors
27
Thanks
6, Dore Nagar, Near Sevashram Railway Crossing,
Under FlyoverUdaipur, Rajasthan
313001 digitaldescribe_at_gmail.com 91-8905890156

• By Shalini singh

Read More