This document provides an introduction to HTML and the basics of creating web pages. It covers the following key points:
- The structure and components of HTML documents, including tags for headings, paragraphs, lists, images, and character formatting.
- How to insert common HTML tags into an HTML file using a text editor and view the formatted page in a web browser.
- Additional HTML features like hyperlinks, tables, forms, frames and style sheets that can be used to enhance web pages.
- The evolution of HTML standards and current/future technologies for web development.
HTML stands for Hyper Text Markup Language
It is a language with the help of which we can create your own Web site.
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content
HTML Example: Document Tag
HTML Example
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a slash before the tag name
The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Write HTML Using Notepad or Text Edit
The general direction in which something tends to move.
A general tendency or inclination. Current style. The Internet is a global revolution in communication – as long as You use letters from the Western alphabet.
People want their own domains in their own languages.
HTML stands for Hyper Text Markup Language
It is a language with the help of which we can create your own Web site.
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content
HTML Example: Document Tag
HTML Example
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a slash before the tag name
The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Write HTML Using Notepad or Text Edit
The general direction in which something tends to move.
A general tendency or inclination. Current style. The Internet is a global revolution in communication – as long as You use letters from the Western alphabet.
People want their own domains in their own languages.
Tradie Exchange Jobs - Referrals in AustraliaTradieExchange
If you're looking for the best Builders & Tradies in Australia and would like to refer or recommend work view the Tradie Exchange network.
www.TradieExchange.com.au
WEB TECHNOLOGY:Web Essentials and Markup Language HTMLsmitawagh14
Web Essentials and Markup Language HTML
HTML
XHTML
CSS
XML
JavaScript
VBSCRIPT
DOM
DHTML
AJAX
E4X
WMLScript
SQL
ASP
ADO
PHP
.NET
SMIL
SVG
FLASH
Java applets
Java servlets
Java Server Page
Introduction to AI for Nonprofits with Tapp NetworkTechSoup
Dive into the world of AI! Experts Jon Hill and Tareq Monaur will guide you through AI's role in enhancing nonprofit websites and basic marketing strategies, making it easy to understand and apply.
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
How to Make a Field invisible in Odoo 17Celine George
It is possible to hide or invisible some fields in odoo. Commonly using “invisible” attribute in the field definition to invisible the fields. This slide will show how to make a field invisible in odoo 17.
Embracing GenAI - A Strategic ImperativePeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
The Roman Empire A Historical Colossus.pdfkaushalkr1407
The Roman Empire, a vast and enduring power, stands as one of history's most remarkable civilizations, leaving an indelible imprint on the world. It emerged from the Roman Republic, transitioning into an imperial powerhouse under the leadership of Augustus Caesar in 27 BCE. This transformation marked the beginning of an era defined by unprecedented territorial expansion, architectural marvels, and profound cultural influence.
The empire's roots lie in the city of Rome, founded, according to legend, by Romulus in 753 BCE. Over centuries, Rome evolved from a small settlement to a formidable republic, characterized by a complex political system with elected officials and checks on power. However, internal strife, class conflicts, and military ambitions paved the way for the end of the Republic. Julius Caesar’s dictatorship and subsequent assassination in 44 BCE created a power vacuum, leading to a civil war. Octavian, later Augustus, emerged victorious, heralding the Roman Empire’s birth.
Under Augustus, the empire experienced the Pax Romana, a 200-year period of relative peace and stability. Augustus reformed the military, established efficient administrative systems, and initiated grand construction projects. The empire's borders expanded, encompassing territories from Britain to Egypt and from Spain to the Euphrates. Roman legions, renowned for their discipline and engineering prowess, secured and maintained these vast territories, building roads, fortifications, and cities that facilitated control and integration.
The Roman Empire’s society was hierarchical, with a rigid class system. At the top were the patricians, wealthy elites who held significant political power. Below them were the plebeians, free citizens with limited political influence, and the vast numbers of slaves who formed the backbone of the economy. The family unit was central, governed by the paterfamilias, the male head who held absolute authority.
Culturally, the Romans were eclectic, absorbing and adapting elements from the civilizations they encountered, particularly the Greeks. Roman art, literature, and philosophy reflected this synthesis, creating a rich cultural tapestry. Latin, the Roman language, became the lingua franca of the Western world, influencing numerous modern languages.
Roman architecture and engineering achievements were monumental. They perfected the arch, vault, and dome, constructing enduring structures like the Colosseum, Pantheon, and aqueducts. These engineering marvels not only showcased Roman ingenuity but also served practical purposes, from public entertainment to water supply.
Operation “Blue Star” is the only event in the history of Independent India where the state went into war with its own people. Even after about 40 years it is not clear if it was culmination of states anger over people of the region, a political game of power or start of dictatorial chapter in the democratic setup.
The people of Punjab felt alienated from main stream due to denial of their just demands during a long democratic struggle since independence. As it happen all over the word, it led to militant struggle with great loss of lives of military, police and civilian personnel. Killing of Indira Gandhi and massacre of innocent Sikhs in Delhi and other India cities was also associated with this movement.
Unit 8 - Information and Communication Technology (Paper I).pdfThiyagu K
This slides describes the basic concepts of ICT, basics of Email, Emerging Technology and Digital Initiatives in Education. This presentations aligns with the UGC Paper I syllabus.
Acetabularia Information For Class 9 .docxvaibhavrinwa19
Acetabularia acetabulum is a single-celled green alga that in its vegetative state is morphologically differentiated into a basal rhizoid and an axially elongated stalk, which bears whorls of branching hairs. The single diploid nucleus resides in the rhizoid.
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
Palestine last event orientationfvgnh .pptxRaedMohamed3
An EFL lesson about the current events in Palestine. It is intended to be for intermediate students who wish to increase their listening skills through a short lesson in power point.
Biological screening of herbal drugs: Introduction and Need for
Phyto-Pharmacological Screening, New Strategies for evaluating
Natural Products, In vitro evaluation techniques for Antioxidants, Antimicrobial and Anticancer drugs. In vivo evaluation techniques
for Anti-inflammatory, Antiulcer, Anticancer, Wound healing, Antidiabetic, Hepatoprotective, Cardio protective, Diuretics and
Antifertility, Toxicity studies as per OECD guidelines
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...Levi Shapiro
Letter from the Congress of the United States regarding Anti-Semitism sent June 3rd to MIT President Sally Kornbluth, MIT Corp Chair, Mark Gorenberg
Dear Dr. Kornbluth and Mr. Gorenberg,
The US House of Representatives is deeply concerned by ongoing and pervasive acts of antisemitic
harassment and intimidation at the Massachusetts Institute of Technology (MIT). Failing to act decisively to ensure a safe learning environment for all students would be a grave dereliction of your responsibilities as President of MIT and Chair of the MIT Corporation.
This Congress will not stand idly by and allow an environment hostile to Jewish students to persist. The House believes that your institution is in violation of Title VI of the Civil Rights Act, and the inability or
unwillingness to rectify this violation through action requires accountability.
Postsecondary education is a unique opportunity for students to learn and have their ideas and beliefs challenged. However, universities receiving hundreds of millions of federal funds annually have denied
students that opportunity and have been hijacked to become venues for the promotion of terrorism, antisemitic harassment and intimidation, unlawful encampments, and in some cases, assaults and riots.
The House of Representatives will not countenance the use of federal funds to indoctrinate students into hateful, antisemitic, anti-American supporters of terrorism. Investigations into campus antisemitism by the Committee on Education and the Workforce and the Committee on Ways and Means have been expanded into a Congress-wide probe across all relevant jurisdictions to address this national crisis. The undersigned Committees will conduct oversight into the use of federal funds at MIT and its learning environment under authorities granted to each Committee.
• The Committee on Education and the Workforce has been investigating your institution since December 7, 2023. The Committee has broad jurisdiction over postsecondary education, including its compliance with Title VI of the Civil Rights Act, campus safety concerns over disruptions to the learning environment, and the awarding of federal student aid under the Higher Education Act.
• The Committee on Oversight and Accountability is investigating the sources of funding and other support flowing to groups espousing pro-Hamas propaganda and engaged in antisemitic harassment and intimidation of students. The Committee on Oversight and Accountability is the principal oversight committee of the US House of Representatives and has broad authority to investigate “any matter” at “any time” under House Rule X.
• The Committee on Ways and Means has been investigating several universities since November 15, 2023, when the Committee held a hearing entitled From Ivory Towers to Dark Corners: Investigating the Nexus Between Antisemitism, Tax-Exempt Universities, and Terror Financing. The Committee followed the hearing with letters to those institutions on January 10, 202
A Strategic Approach: GenAI in EducationPeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
2. Tut or i al Obj ec t i v es
» Explore the structure of the World Wide Web
» Learn the basic principles of Web documents
» Create a HTML document
» View an HTML file using a Web browser
» Use HTML tags for text, headings, paragraphs, and
lists
» Insert character tags into an HTML document
3. Tut or i al Obj ec t i v es
Cont i nued
» Insert an inline graphic image into a
HTML document
» Add special characters to an HTML
document
» Insert horizontal lines into an HTML
document
4. I nt r oduc i ng t he W l d W de
or
i
W
eb
» In order for computers to share
resources efficiently, they can be
linked together in one of the
following structured networks:
– linked within a local area network (LAN)
– linked across a wide area network (WAN)
» Networks are very useful, their use
led to a “network of networks”
called the Internet.
5. The I nt er net
» The Internet consists of millions of
interconnected computers that enable users to
communicate and share information.
» Many Internet tools required users to master an
array of terms, acronyms, and commands before
they could navigate the Internet.
» The World Wide Web was developed to make
the Internet easier to use and give quick access
to users.
6. St r uc t ur e of t he I nt er net
This figure shows the physical structure of the Internet, which uses fiber-optic cables,
satellites, phone lines, and other telecommunications media to send data back and forth.
7. The Dev el opm
ent of t he
W l d W de W
or
i
eb
» In 1989, Timothy Berners-Lee and other
researchers at the CERN nuclear research
facility, laid the foundation of the World Wide
Web, or the Web.
– created an information system that would make it easy for
researchers to locate and share data
– required minimal training and support
– developed a system of hypertext documents, electronic files
that contain elements that you can easily select
8. Hy per t ex t Doc um
ent s
» Hypertext offers a better way of locating
information.
» When you read a book, you follow a linear
progression, reading one page after
another.
» With hypertext, you progress through pages
in whatever way is best suited to you and
your objectives.
» Hypertext lets you skip from one topic to
another.
9. Hy per t ex t Doc um
ent s
Cont i nued
» The key to hypertext is the use of links, which you
activate to move from one topic to another.
– a link can open a document on a computer anywhere in the world
» Hypertext has become the dominate method of
sharing and retrieving information on the Internet,
becoming known as the World Wide Web, or the
Web.
» Documents on the Web are known as Web pages.
10. W Pages and W Br ows er s
eb
eb
» A Web page is stored on a Web
server, which makes the page
available to users of the Web.
» To view a Web page, the user runs a
Web browser, a software program
that retrieves the page and displays
it.
» A Web browser can either be textbased, or graphical.
11. W BROSERS
EB
–
–
–
–
–
» The most common Web browsers
available today are:
FIREFOX
GOOGLE CHROME
SAFARI
OPERA
IE
12. W Page wi t h I nt er es t i ng
eb
Font s , Gr aphi c s , and Lay out
This figure shows a Web page is
not only a source of information,
it can also be a work of art.
graphic image
links
interesting fonts
The Web designer has a great
deal of control over the format of
the page.
13. HTM
L: The Language of t he
W
eb
» Web pages are text files, written in a language
called Hypertext Markup Language or HTML.
» A markup language is a language used to
describe the contact and format of documents.
» HTML was developed from the Standard
Generalized Markup Language (SGML), a
language used for large-scale documents.
» SGML proved to be cumbersome and difficult,
thus HTML was created.
14. Hy per t ex t M k up Language
ar
( HTM
L)
» HTML allows Web authors to create
documents that can be displayed across
different operating systems.
» HTML code is easy to use, that even
nonprogrammers can learn to use it.
» HTML describes the format of Web
pages through the use of tags.
– it’s the job of the Web browser to interpret these tags
and render the text accordingly
15. Ver s i ons of HTM
L
This figure presents a history of the various versions of HTML that have been
released by the World Wide Web Consortium (W3C).
16. Hy per t ex t M k up
ar
Language ( HTM
L) Cont i nued
» HTML has a set of rules, called syntax.
– syntax are a set of standards or specifications developed
by a consortium of Web developers, programmers, and
authors called the World Wide Web Consortium (WC3)
» HTML extensions have been added to
support new features, which have been
adopted in subsequent sets of standards
released by the W3C.
– these extensions have provided Web page authors with
more options
17. W Dev el opm
eb
ent
» Web designers need to determine which browsers and
browser versions support their web pages.
» In the future, Web development is focusing more on
XML (Extensible Markup Language) and XHTML
(Extensible HyperText Markup Language) for
developing document content.
– XML combined with style sheets provides the same functionality as
HTML, but with greater flexibility
– XHTML was designed to overcome some of the problems with
competing HTML standards
18. Tool s f or Cr eat i ng HTM
L
Doc um
ent s
» HTML documents are text files, which a
text editor such as Windows NotePad
can be used to create.
» You can also use an HTML converter or
an HTML editor.
– an HTML converter like Microsoft Word takes text
in one format and converts it to HTML code
– an HTML editor helps you create an HTML file by
inserting HTML codes for you as you work
19. Cr eat i ng an HTM Doc um
L
ent
It’s always a
good idea to
plan the
appearance of
your Web page
before you start
writing code.
heading 1
image
paragraph
horizontal line
list
heading 3
bold and italic
text
20. HTM Sy nt ax
L
» Document content is what the users sees
on the page, such as headings and images.
» Tags are the HTML codes that control the
appearance of the document content.
– tag is the name of the HTML tag
– attributes are properties of the tag
– document content is actual content that appears in the
Web page
21. HTM Tags
L
» Tags can be one-sided or two-sided.
– two-sided tags contain an opening tag <b> that tells
the browser to turn on a feature and apply it to the
contact that follows, and a closing tag </b> that
turns off the feature
– one-sided tags are used to insert noncharacter data
into the Web page, such as a graphic image or video
clip <tag attribute>
» Tags are not case sensitive. The current
standard is to display all tags in
lowercase letters.
22. I nt er pr et at i on of t he <H1>
t ag by Di f f er ent Br ows er s
This figure shows how three different browsers might interpret a line of HTML code.
23. I ni t i al HTM Tags i n
L
Not epad
Your text editor may not display the file extension
in the title bar. This is okay.
<html> tag
indicates that
this file is
written in
HTML
<head> tag
contains
information about
the Web page
<title> tag contains
the Web page title
Page content will
go between the
<body> tags
24. The I ni t i al HTM Fi l e i n
L
I nt er net Ex pl or er
the title you
entered between
the <title>
tags
address box
indicates the
name and
location of the
HTML file
page content will
appear here
You should occasionally
view the formatted page
with different Web
browsers to check
compatibility, verify
that there are no syntax
errors, or other
problems.
25. Cr eat i ng Headi ng Tags
» HTML supports six levels of headings,
numbered <h1> through <h6>, with
<h1> being the largest and most
prominent.
» Headings are always displayed in a
bold font.
26. Si x Headi ng Lev el s
This figure
illustrates the
general
appearance of the
six heading styles.
Your browser
might use slightly
different fonts and
sizes.
27. Ent er i ng Headi ng Tags and
Tex t
heading tags
As of HTML 3.2, the heading tag can
contain additional attributes, one of
which is the alignment attribute.
28. Headi ngs As They Appear
i n t he Br ows er
<h1>
<h2>
<h3>
29. Ent er i ng Par agr aph Tex t
If you are using a test editor
like NotePad, the text might
not wrap to the next line
automatically.
Selecting the Word Wrap
command within NotePad will
allow you to see all the text on
your screen.
32. The Par agr aphs Di s pl ay ed
by t he Br ows er
Remember:
HTML formats
text only through
the use of tags
and ignores such
things as extra
blank spaces,
blank lines, or
tabs.
four grading
paragraphs
are not
separated
33. The Gr adi ng Tex t Separ at ed
i nt o Par agr aphs
To add space
between
paragraphs,
you use the
paragraph tag
<p>.
text is now
separated
into four
paragraphs
34. Cr eat i ng Li s t s
» HTML supports three kinds of lists:
– an ordered list, which is used to display
information in a numeric order
– an unordered list, which list items are not listed
in a particular order i.e. bullets
– a definition list, which is a list of terms, each
followed by a definition line that is typically
indented slightly to the right
35. Ent er i ng an Unor der ed Li s t
<ul> unordered
list tag
<li> list
item tag
36. The Unor der ed Li s t i n t he
Br ows er
An unordered
list is a bulleted
list.
unordered
list
37. Cr eat i ng Char ac t er Tags
» HTML also lets you format individual
characters.
» A tag that you apply to an individual
character is called a character tag.
There are two types of character tags:
– logical character tag
– physical character tag
38. Com on Logi c al Char ac t er
m
Tags
This figure lists some common logical character tags.
39. Com on Phy s i c al Char ac t er
m
Tags
This figure shows examples of how these tags can be displayed in a browser.
40. Logi c al Char ac t er Tags as
They Appear i n t he Br ows er
examples of
individual
tags
example of
combined
tags
41. Phy s i c al Char ac t er Tags as
They Appear i n t he Br ows er
Underline text
can sometimes be
confused with
hyperlinked text
(which is usually
underlined), and
for that reason,
use of the <u> tag
is discouraged.
42. Appl y i ng Char ac t er Tags
Italic <i> </i>
and bold
<b> </b>
character tags
If you support
users with older
browsers, you
should use a logical
tag. Otherwise, use
physical tags,
which are more
common and easier
to interpret.
43. The Ef f ec t of t he Char ac t er
Tags
i n t he Br ows er
text
formatted
with bold
and italic
44. I ns er t i ng a Gr aphi c
» Images can be displayed in two ways: as inline
images or as external images.
– an inline image displays directly on the Web page and is
displayed when the page is accessed by a user
– an inline image can be placed on a separate line in your HTML
code, or it can be placed directly within a line of text
– inline images should be in one of two file formats: GIF (Graphics
Interchange Format) or JPEG (Joint Photographic Experts
Group)
45. I ns er t i ng a Gr aphi c
Cont i nued
– an external image is not displayed with the Web
page, the browser must have a file viewer, which
is a separate program that the browser launches
when it encounters an external image file
– external images are represented by an icon that a
user clicks to view the image
– external images are not limited to GIF or JPEG
formats
46. I ns er t i ng a Gr aphi c
Image file
dube.jpg
use the <p>
tag so you
can center
the image
47. The I m
age Fi l e as i t
Appear s
i n t he Br ows er
49. Spec i al Char ac t er s and
Codes
This figure shows some HTML symbols and the corresponding code numbers or names.
50. Spec i al Char ac t er s i n t he
Br ows er
This figure shows an example of the code “Welcome to Mr. Dubé’s
Web site”, which accented the é in his last name..
accented é added
to last name
51. I ns er t i ng Hor i z ont al Li nes
» A horizontal line can improve the
appearance of a Web page.
» The syntax for creating a horizontal
line is:
<hr align=“align” size=“size”
width=“width” color=“color”
noshade>
52. I ns er t i ng Hor i z ont al Li nes
» The HTML horizontal syntax includes the following:
– align specifies the horizontal alignment of the line on the
page (center, left, or right)
– size specifies the height of the line in pixels or percentage
of the screen width
– width indicates the width of the line in pixels or
percentage of the screen width
– color indicates the color of the line
– noshade specifies that the browser display a solid line
53. Di f f er ent Li ne St y l es
size=12
width-100%
size=6
width-50%
size=3
width-25%
size=1
width-10%
<hr align=“center” size=“12” width=“100%”>
<hr align=“center” size=“6” width=“50%”>
<hr align=“center” size=“3” width=“25%”>
<hr align=“center” size=“1” width=“10%”>
You can use line
styles to improve the
appearance of your
Web page.
54. Hor i z ont al Li ne Added t o
t he Page
horizontal line