SlideShare une entreprise Scribd logo
1  sur  28
Static and Dynamic Web Sites.
HTML: Tags use.
Static Web page
A static web page is a web page that is delivered to the user
exactly as stored, in contrast to dynamic web pages which
are generated by a web application.
Consequently a static web page displays the same
information for all users, from all contexts, subject to
modern capabilities of a web server to negotiate content-type
or language of the document and the server is configured to
do so.
Advantages
Quick to develop
Cheap to develop
Cheap to host
Disadvantages
 Any personalization or interactivity has to run client-side
(ie. in the browser), which is restricting.
Maintaining large numbers of static pages as files can be
impractical without automated tools.
Requires web development expertise to update site
Site not as useful for the user
Content can get stagnant
Dynamic web page
A dynamic web page is a kind of web page that has been
prepared with fresh information (content and/or layout), for
each individual viewing.
It is not static because
-> it changes with the time (e.g. news content),
->the user (e.g. preferences in a login session),
->the user interaction (e.g. web page game),
->the context (e.g. parametric customization)
Advantages of dynamic
websites
Much more functional website
Much easier to update
New content brings people back to the site
Can work as a system to allow staff or users to collaborate
Disadvantages
Slower / more expensive to develop
Hosting costs a little more
 Search engines work by creating indexes of published
HTML web pages that were, initially, "static". With the
advent of dynamic web pages, often created from a private
database, the content is less visible. Unless this content is
duplicated in some way (for example, as a series of extra
static pages on the same site), a search may not find the
information it is looking for. It is unreasonable to expect
generalized web search engines to be able to access complex
database structures, some of which in any case may be secure
HTML CONTENTS
THE HTMLTAG
THE HEADTAG
TITLES
THE BODYTAG
HEADERS
PARAGRAPHS
PREFORMATEDTEXT
BOLD FACE AND ITALICS
LIST
CENTER
SPECIAL FEATURES
THE HTML TAG
<HTML> TAG:
Tags are contained in < > symbols. In most cases you start
with the beginning tag, put in the word or words that will be
affected by this tag, and at the end of the string of word(s), you
place a closing tag.
HTML tag is usually placed on the first line of your
document. At the end of your document you should close with
the </html> tag.
The <html> tag signals the point where text
should start being interpreted as HTML code.
THE HEAD TAG
Just like the header of a memo, the head of an HTML
document contains special information, like its title.The head
of a document is demarcated by <head> and </head>
respectively.
<html>
<head>
<title>My First HTML Document</title>
</head>
TITLES
A title tag allows you to specify a Document Title in your
browser window.When people make hotlists, this title is what they
see in their list after they add your document.The format is:
<title>My First HTML Document</title>
Remember, the title usually doesn't appear in the document
itself, but in a title box or bar at the top of the window.
THE BODY TAG
Like you might expect, the body tags <body> and </body>
define the beginning and end of the bulk of your document. All
your text, images, and links will be in the body of the document.
The body should start after the head. A typical page
might begin like
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
HEADERS
There are up to six levels of headers that can be used in your
document, h1 through h6. Header 1 is the largest header and they
get progressively smaller through header 6. Below are each of the
six headers and how they usually appear in relation to one another.
<h1>This is a header 1 tag</h1>
This is a header 1 tag
Headers, as you notice, not only vary in size, they are also
bold and have a blank line inserted before and after them.
PARAGRAPHS
In HTML, a paragraph tag <p> should be put at the end of every
paragraph of "normal" text (normal being defined as not already having a
tag associated with it).
<p> causes a line break and adds a trailing blank line
<br> causes a line break with no trailing blank line
As a convenience to yourself and others who might have to edit your
HTML documents, it's a very good idea to put two or three blank lines
between paragraphs to facilitate editing.
PREFORMATTED TEXT
The preformatted text tag allows you to include text in your
document that normally remains in a fixed-width font and retains the
spaces, lines, and tabs of your source document. In other words, it
leaves your text as it appears initially or just as you typed it in. Most
clients collapse multiple spaces into one space, even tabs are collapsed to
one space. The only way to circumvent this is to use the preformatted
tag.Visually, preformatted text looks like a courier font.
<pre>this is
an example
of a preformatted
text tag</pre>
BOLDFACE AND ITALICS
When using these tags, you usually cannot (and
probably should not) have text that is both boldface and
italics; the last tag encountered is usually the tag that is
displayed. For example, if you had a boldface tag followed
immediately by an italic tag, the tagged word would
appear in italics.
LISTS
There is an easy way in HTML to have numbered,
unnumbered, and definition lists. In addition, you can nest
lists within lists.
When using lists, you have no control over the amount
of space between the bullet or list number, HTML
automatically does this for you. Neither (as yet) do you have
control over what type of bullet will be used as each
browser is different.
UNNUMBERED LISTS
Unnumbered lists are started with the <ul> tag, followed by
the actual list items, which are marked with the <li> tag. The
list is ended with the ending tag </ul>.
For example, here is an unnumbered list with three items:
 <ul>
 <li> list item 1
 <li> list item 2
 <li> list item 3
 </ul>
NUMBERED LISTS
Here is the same list using a numbered list format:
 <ol>
 <li> list item 1
 <li> list item 2
 <li> list item 3
 </ol>
DEFINITION LISTS
Definition lists allow you to indent without
necessarily having to use bullets.
 <dl>
 <dt> This is a term
 <dd> This is a definition
 <dd> And yet another definition
 <dt> Another term
 <dd> Another definition
 </dl>
NESTED LISTS
Finally, here is a nested list within an unnumbered list (we could
just have easily had a nested list within a numbered list).
<ul>
<li> list item 1<li> nested item 1
<ul><li> nested item 2
 <li> nested item 1 </ul>
 <li> nested item 2 </ul>
 <ul>
<li> list item 2
 <ul>
 <li> nested item 1
 <li> nested item 2
 </ul>
<li> list item 3
 </ul>
CENTER
You can center text, images, and headings with the center
tag:
<center>This is a centered sentence</center>
This is a centered sentence.
The center tag automatically inserts a line break after the
closing center tag.
Addresses
The <address> tag normally appears at the end of a
document and is used most frequently to mark information on
contacting the author or institution that has supplied this
information.
<address>
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu
</address>
COMMENTS
It is possible to include comments in a source HTML
document that do not appear when seen through a browser.This is
most useful for giving warnings and special instructions to future
editors of your document.
Comments take the form:
<!-----This comment will not appear in the browser----->
Table tag
The <table> tag defines an HTML table.
An HTML table consists of the <table> element and one or
more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element
defines a table header, and the <td> element defines a table
cell.
Table tag
<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
SPECIAL CHARACTERS
&aacute; .... á &acirc; .... â &aelig; .... æ
&agrave; .... à &amp; .... & &aring; .... å
&atilde; .... ã &auml; .... ä &ccedil; .... ç
&eacute; .... é &ecirc; .... ê &egrave; .... è
&eth; .... ð &euml; .... ë &gt; .... >
&iacute; .... í &icirc; .... î &igrave; .... ì
&iuml; .... ï &lt; .... < &ntilde; .... ñ
&oacute; .... ó &ocirc; .... ô &ograve; .... ò
&oslash; .... ø &otilde; .... õ &ouml; .... ö
&quot; .... " &szlig; .... ß &thorn; .... þ
&uacute; .... ú &ucirc; .... û &ugrave; .... ù
&uuml; .... ü &yacute; .... ý &yuml; .... ÿ
questions?

Contenu connexe

Tendances

SEARS LIST OF SUBJECT HEADING ppt
SEARS LIST OF SUBJECT HEADING pptSEARS LIST OF SUBJECT HEADING ppt
SEARS LIST OF SUBJECT HEADING pptUniversity of Delhi
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignZoe Gillenwater
 
Shopify SEO - BrightonSEO 2021
Shopify SEO - BrightonSEO 2021Shopify SEO - BrightonSEO 2021
Shopify SEO - BrightonSEO 2021Chris Long
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
2011 library orientation freshman
2011 library orientation freshman2011 library orientation freshman
2011 library orientation freshmanlorikunc
 
Mediaqueries
MediaqueriesMediaqueries
MediaqueriesBrillio
 
How to Rank 10 Million Products on Page One -- bol.com
How to Rank 10 Million Products on Page One -- bol.comHow to Rank 10 Million Products on Page One -- bol.com
How to Rank 10 Million Products on Page One -- bol.comConductor
 
Comment concevoir la page parfaite ? - Laura Blanchard
Comment concevoir la page parfaite ? - Laura BlanchardComment concevoir la page parfaite ? - Laura Blanchard
Comment concevoir la page parfaite ? - Laura BlanchardLaura Blanchard - Agence KHOSI
 
Datos Abiertos del Ayuntamiento de Málaga y como usar su API
Datos Abiertos del Ayuntamiento de Málaga y como usar su APIDatos Abiertos del Ayuntamiento de Málaga y como usar su API
Datos Abiertos del Ayuntamiento de Málaga y como usar su APIDavid Bueno Vallejo
 
The intersection between SEO and accessibility.pdf
The intersection between SEO and accessibility.pdfThe intersection between SEO and accessibility.pdf
The intersection between SEO and accessibility.pdfJessMackereth
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlveena parihar
 

Tendances (20)

Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
SEARS LIST OF SUBJECT HEADING ppt
SEARS LIST OF SUBJECT HEADING pptSEARS LIST OF SUBJECT HEADING ppt
SEARS LIST OF SUBJECT HEADING ppt
 
Html basics
Html basicsHtml basics
Html basics
 
Bibliographic control : Basics
Bibliographic control : BasicsBibliographic control : Basics
Bibliographic control : Basics
 
Markup Languages
Markup Languages Markup Languages
Markup Languages
 
Html
HtmlHtml
Html
 
Html introduction
Html introductionHtml introduction
Html introduction
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
Shopify SEO - BrightonSEO 2021
Shopify SEO - BrightonSEO 2021Shopify SEO - BrightonSEO 2021
Shopify SEO - BrightonSEO 2021
 
Intro Html
Intro HtmlIntro Html
Intro Html
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
2011 library orientation freshman
2011 library orientation freshman2011 library orientation freshman
2011 library orientation freshman
 
Html and css
Html and cssHtml and css
Html and css
 
Mediaqueries
MediaqueriesMediaqueries
Mediaqueries
 
How to Rank 10 Million Products on Page One -- bol.com
How to Rank 10 Million Products on Page One -- bol.comHow to Rank 10 Million Products on Page One -- bol.com
How to Rank 10 Million Products on Page One -- bol.com
 
Comment concevoir la page parfaite ? - Laura Blanchard
Comment concevoir la page parfaite ? - Laura BlanchardComment concevoir la page parfaite ? - Laura Blanchard
Comment concevoir la page parfaite ? - Laura Blanchard
 
CSS
CSSCSS
CSS
 
Datos Abiertos del Ayuntamiento de Málaga y como usar su API
Datos Abiertos del Ayuntamiento de Málaga y como usar su APIDatos Abiertos del Ayuntamiento de Málaga y como usar su API
Datos Abiertos del Ayuntamiento de Málaga y como usar su API
 
The intersection between SEO and accessibility.pdf
The intersection between SEO and accessibility.pdfThe intersection between SEO and accessibility.pdf
The intersection between SEO and accessibility.pdf
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 

Similaire à static dynamic html tags (20)

static dynamic html tags
 static dynamic html tags static dynamic html tags
static dynamic html tags
 
Htmlppt 100604051515-phpapp01
Htmlppt 100604051515-phpapp01Htmlppt 100604051515-phpapp01
Htmlppt 100604051515-phpapp01
 
web technology
web technologyweb technology
web technology
 
Html ppt computer
Html ppt computerHtml ppt computer
Html ppt computer
 
HTML
HTMLHTML
HTML
 
Over view of html
Over view of htmlOver view of html
Over view of html
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Html
HtmlHtml
Html
 
HTML.pdf
HTML.pdfHTML.pdf
HTML.pdf
 
Html basics
Html basicsHtml basics
Html basics
 
Html
HtmlHtml
Html
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html
HtmlHtml
Html
 
Html interview-questions-and-answers
Html interview-questions-and-answersHtml interview-questions-and-answers
Html interview-questions-and-answers
 
HTML Tags
HTML Tags HTML Tags
HTML Tags
 
Advanced html
Advanced htmlAdvanced html
Advanced html
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Html project
Html projectHtml project
Html project
 
Best HTML Training &Coaching in Ambala
Best HTML Training &Coaching in AmbalaBest HTML Training &Coaching in Ambala
Best HTML Training &Coaching in Ambala
 

Plus de teach4uin

Master pages
Master pagesMaster pages
Master pagesteach4uin
 
.Net framework
.Net framework.Net framework
.Net frameworkteach4uin
 
Scripting languages
Scripting languagesScripting languages
Scripting languagesteach4uin
 
State management
State managementState management
State managementteach4uin
 
security configuration
security configurationsecurity configuration
security configurationteach4uin
 
New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentationteach4uin
 
.Net overview
.Net overview.Net overview
.Net overviewteach4uin
 
Stdlib functions lesson
Stdlib functions lessonStdlib functions lesson
Stdlib functions lessonteach4uin
 
storage clas
storage classtorage clas
storage clasteach4uin
 
Cprogrammingprogramcontrols
CprogrammingprogramcontrolsCprogrammingprogramcontrols
Cprogrammingprogramcontrolsteach4uin
 
Cprogrammingoperator
CprogrammingoperatorCprogrammingoperator
Cprogrammingoperatorteach4uin
 

Plus de teach4uin (20)

Controls
ControlsControls
Controls
 
validation
validationvalidation
validation
 
validation
validationvalidation
validation
 
Master pages
Master pagesMaster pages
Master pages
 
.Net framework
.Net framework.Net framework
.Net framework
 
Scripting languages
Scripting languagesScripting languages
Scripting languages
 
Css1
Css1Css1
Css1
 
Code model
Code modelCode model
Code model
 
Asp db
Asp dbAsp db
Asp db
 
State management
State managementState management
State management
 
security configuration
security configurationsecurity configuration
security configuration
 
New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentation
 
.Net overview
.Net overview.Net overview
.Net overview
 
Stdlib functions lesson
Stdlib functions lessonStdlib functions lesson
Stdlib functions lesson
 
enums
enumsenums
enums
 
memory
memorymemory
memory
 
array
arrayarray
array
 
storage clas
storage classtorage clas
storage clas
 
Cprogrammingprogramcontrols
CprogrammingprogramcontrolsCprogrammingprogramcontrols
Cprogrammingprogramcontrols
 
Cprogrammingoperator
CprogrammingoperatorCprogrammingoperator
Cprogrammingoperator
 

Dernier

Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Celine George
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfMr Bounab Samir
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxHumphrey A Beña
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfSpandanaRallapalli
 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Celine George
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYKayeClaireEstoconing
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTiammrhaywood
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxDr.Ibrahim Hassaan
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for BeginnersSabitha Banu
 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxAnupkumar Sharma
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSJoshuaGantuangco2
 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designMIPLM
 
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfAMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfphamnguyenenglishnb
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Celine George
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Jisc
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptxmary850239
 

Dernier (20)

Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdf
 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptx
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for Beginners
 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-design
 
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfAMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
 

static dynamic html tags

  • 1. Static and Dynamic Web Sites. HTML: Tags use.
  • 2. Static Web page A static web page is a web page that is delivered to the user exactly as stored, in contrast to dynamic web pages which are generated by a web application. Consequently a static web page displays the same information for all users, from all contexts, subject to modern capabilities of a web server to negotiate content-type or language of the document and the server is configured to do so.
  • 3. Advantages Quick to develop Cheap to develop Cheap to host
  • 4. Disadvantages  Any personalization or interactivity has to run client-side (ie. in the browser), which is restricting. Maintaining large numbers of static pages as files can be impractical without automated tools. Requires web development expertise to update site Site not as useful for the user Content can get stagnant
  • 5. Dynamic web page A dynamic web page is a kind of web page that has been prepared with fresh information (content and/or layout), for each individual viewing. It is not static because -> it changes with the time (e.g. news content), ->the user (e.g. preferences in a login session), ->the user interaction (e.g. web page game), ->the context (e.g. parametric customization)
  • 6. Advantages of dynamic websites Much more functional website Much easier to update New content brings people back to the site Can work as a system to allow staff or users to collaborate
  • 7. Disadvantages Slower / more expensive to develop Hosting costs a little more  Search engines work by creating indexes of published HTML web pages that were, initially, "static". With the advent of dynamic web pages, often created from a private database, the content is less visible. Unless this content is duplicated in some way (for example, as a series of extra static pages on the same site), a search may not find the information it is looking for. It is unreasonable to expect generalized web search engines to be able to access complex database structures, some of which in any case may be secure
  • 8. HTML CONTENTS THE HTMLTAG THE HEADTAG TITLES THE BODYTAG HEADERS PARAGRAPHS PREFORMATEDTEXT BOLD FACE AND ITALICS LIST CENTER SPECIAL FEATURES
  • 9. THE HTML TAG <HTML> TAG: Tags are contained in < > symbols. In most cases you start with the beginning tag, put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag. HTML tag is usually placed on the first line of your document. At the end of your document you should close with the </html> tag. The <html> tag signals the point where text should start being interpreted as HTML code.
  • 10. THE HEAD TAG Just like the header of a memo, the head of an HTML document contains special information, like its title.The head of a document is demarcated by <head> and </head> respectively. <html> <head> <title>My First HTML Document</title> </head>
  • 11. TITLES A title tag allows you to specify a Document Title in your browser window.When people make hotlists, this title is what they see in their list after they add your document.The format is: <title>My First HTML Document</title> Remember, the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window.
  • 12. THE BODY TAG Like you might expect, the body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be in the body of the document. The body should start after the head. A typical page might begin like <html> <head> <title>My First HTML Document</title> </head> <body>
  • 13. HEADERS There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another. <h1>This is a header 1 tag</h1> This is a header 1 tag Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them.
  • 14. PARAGRAPHS In HTML, a paragraph tag <p> should be put at the end of every paragraph of "normal" text (normal being defined as not already having a tag associated with it). <p> causes a line break and adds a trailing blank line <br> causes a line break with no trailing blank line As a convenience to yourself and others who might have to edit your HTML documents, it's a very good idea to put two or three blank lines between paragraphs to facilitate editing.
  • 15. PREFORMATTED TEXT The preformatted text tag allows you to include text in your document that normally remains in a fixed-width font and retains the spaces, lines, and tabs of your source document. In other words, it leaves your text as it appears initially or just as you typed it in. Most clients collapse multiple spaces into one space, even tabs are collapsed to one space. The only way to circumvent this is to use the preformatted tag.Visually, preformatted text looks like a courier font. <pre>this is an example of a preformatted text tag</pre>
  • 16. BOLDFACE AND ITALICS When using these tags, you usually cannot (and probably should not) have text that is both boldface and italics; the last tag encountered is usually the tag that is displayed. For example, if you had a boldface tag followed immediately by an italic tag, the tagged word would appear in italics.
  • 17. LISTS There is an easy way in HTML to have numbered, unnumbered, and definition lists. In addition, you can nest lists within lists. When using lists, you have no control over the amount of space between the bullet or list number, HTML automatically does this for you. Neither (as yet) do you have control over what type of bullet will be used as each browser is different.
  • 18. UNNUMBERED LISTS Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>. For example, here is an unnumbered list with three items:  <ul>  <li> list item 1  <li> list item 2  <li> list item 3  </ul>
  • 19. NUMBERED LISTS Here is the same list using a numbered list format:  <ol>  <li> list item 1  <li> list item 2  <li> list item 3  </ol>
  • 20. DEFINITION LISTS Definition lists allow you to indent without necessarily having to use bullets.  <dl>  <dt> This is a term  <dd> This is a definition  <dd> And yet another definition  <dt> Another term  <dd> Another definition  </dl>
  • 21. NESTED LISTS Finally, here is a nested list within an unnumbered list (we could just have easily had a nested list within a numbered list). <ul> <li> list item 1<li> nested item 1 <ul><li> nested item 2  <li> nested item 1 </ul>  <li> nested item 2 </ul>  <ul> <li> list item 2  <ul>  <li> nested item 1  <li> nested item 2  </ul> <li> list item 3  </ul>
  • 22. CENTER You can center text, images, and headings with the center tag: <center>This is a centered sentence</center> This is a centered sentence. The center tag automatically inserts a line break after the closing center tag.
  • 23. Addresses The <address> tag normally appears at the end of a document and is used most frequently to mark information on contacting the author or institution that has supplied this information. <address> Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu </address>
  • 24. COMMENTS It is possible to include comments in a source HTML document that do not appear when seen through a browser.This is most useful for giving warnings and special instructions to future editors of your document. Comments take the form: <!-----This comment will not appear in the browser----->
  • 25. Table tag The <table> tag defines an HTML table. An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements. The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.
  • 26. Table tag <table border="1">   <tr>     <th>Month</th>     <th>Savings</th>   </tr>   <tr>     <td>January</td>     <td>$100</td>   </tr> </table>
  • 27. SPECIAL CHARACTERS &aacute; .... á &acirc; .... â &aelig; .... æ &agrave; .... à &amp; .... & &aring; .... å &atilde; .... ã &auml; .... ä &ccedil; .... ç &eacute; .... é &ecirc; .... ê &egrave; .... è &eth; .... ð &euml; .... ë &gt; .... > &iacute; .... í &icirc; .... î &igrave; .... ì &iuml; .... ï &lt; .... < &ntilde; .... ñ &oacute; .... ó &ocirc; .... ô &ograve; .... ò &oslash; .... ø &otilde; .... õ &ouml; .... ö &quot; .... " &szlig; .... ß &thorn; .... þ &uacute; .... ú &ucirc; .... û &ugrave; .... ù &uuml; .... ü &yacute; .... ý &yuml; .... ÿ