Hello Friends..Welcome again.
Today Igot for you amazing topic for the learning that is, HTML vs XHTML. People generally get confuse with these two Web Development Languages.
I hope this presentation will help you in understanding the difference between both the languages.
Hello Friends..Welcome again.
Today Igot for you amazing topic for the learning that is, HTML vs XHTML. People generally get confuse with these two Web Development Languages.
I hope this presentation will help you in understanding the difference between both the languages.
Origins and evolution of HTML and XHTML by Tanvir Zafar.
HTML is the Basic web design language.
Learn more about HTML at http://howpk.com/introduction-to-html/
These slides were prepared for the fulfillment of class presentation in Web Engineering (Masters of Science in Information System Engineering) at Gandaki College of Engineering and Science (GCES).
Today’s designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..
HTML PART-1 Content- 1. Introduction 2. Setting up document 3. document structure
4. Html element
5. Html Attributes
6. Html heading
7. Html paragraph
8. Html display
Computing is Not a Rock Band: Student Understanding of the Computing DisciplinesRandy Connolly
This presentation reports the initial findings of a multi-year study that is surveying major and non-major students’ understanding of the different computing disciplines. This study is based on work originally conducted by Courte and Bishop-Clark from 2009, but which uses a broadened study instrument that provided additional forms of analysis. Data was collected from 199 students from a single institution who were computer science, information systems/information technology and non-major students taking a variety of introductory computing courses. Results show that undergraduate computing students are more likely to rate tasks as being better fits to computer disciplines than are their non-major (NM) peers. Uncertainty among respondents did play a large role in the results and is discussed alongside implications for teaching and further research.
Doing Business 2015: au-delà de l’efficience est une publication phare du Groupe de la Banque Mondiale et est le 12ème d'une série de rapports annuels mesurant les réglementations favorables et défavorables de l'activité commerciale. Doing Business présente des indicateurs quantitatifs sur la réglementation des affaires et la protection des droits de propriété de 189 pays - de l'Afghanistan au Zimbabwe - au fil du temps.
Doing Business mesure les réglementations affectant 11 domaines de la vie d'une entreprise. Dix de ces domaines sont inclus dans le classement de cette année sur la facilité de faire des affaires: création d'entreprise, octroi de permis de construire, raccordement à l'électricité, transfert de propriété, obtention de prêts, protection des investisseurs minoritaires, paiement des impôts, commerce transfrontalier, exécution des contrats et règlement de l’insolvabilité. Doing Business mesure également la régulation du marché du travail, ce qui n'est pas inclus dans le classement de cette année.
Les données de Doing Business 2015 sont mises à jour en date du 1er Juin 2014. Les indicateurs sont utilisés pour analyser les résultats économiques et identifier les meilleures réformes de la réglementation des affaires, dépendant de l’endroit et de l’objectif. Le rapport de cette année présente une expansion notable de plusieurs ensembles d'indicateurs et un changement dans le calcul du classement.
Origins and evolution of HTML and XHTML by Tanvir Zafar.
HTML is the Basic web design language.
Learn more about HTML at http://howpk.com/introduction-to-html/
These slides were prepared for the fulfillment of class presentation in Web Engineering (Masters of Science in Information System Engineering) at Gandaki College of Engineering and Science (GCES).
Today’s designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..
HTML PART-1 Content- 1. Introduction 2. Setting up document 3. document structure
4. Html element
5. Html Attributes
6. Html heading
7. Html paragraph
8. Html display
Computing is Not a Rock Band: Student Understanding of the Computing DisciplinesRandy Connolly
This presentation reports the initial findings of a multi-year study that is surveying major and non-major students’ understanding of the different computing disciplines. This study is based on work originally conducted by Courte and Bishop-Clark from 2009, but which uses a broadened study instrument that provided additional forms of analysis. Data was collected from 199 students from a single institution who were computer science, information systems/information technology and non-major students taking a variety of introductory computing courses. Results show that undergraduate computing students are more likely to rate tasks as being better fits to computer disciplines than are their non-major (NM) peers. Uncertainty among respondents did play a large role in the results and is discussed alongside implications for teaching and further research.
Doing Business 2015: au-delà de l’efficience est une publication phare du Groupe de la Banque Mondiale et est le 12ème d'une série de rapports annuels mesurant les réglementations favorables et défavorables de l'activité commerciale. Doing Business présente des indicateurs quantitatifs sur la réglementation des affaires et la protection des droits de propriété de 189 pays - de l'Afghanistan au Zimbabwe - au fil du temps.
Doing Business mesure les réglementations affectant 11 domaines de la vie d'une entreprise. Dix de ces domaines sont inclus dans le classement de cette année sur la facilité de faire des affaires: création d'entreprise, octroi de permis de construire, raccordement à l'électricité, transfert de propriété, obtention de prêts, protection des investisseurs minoritaires, paiement des impôts, commerce transfrontalier, exécution des contrats et règlement de l’insolvabilité. Doing Business mesure également la régulation du marché du travail, ce qui n'est pas inclus dans le classement de cette année.
Les données de Doing Business 2015 sont mises à jour en date du 1er Juin 2014. Les indicateurs sont utilisés pour analyser les résultats économiques et identifier les meilleures réformes de la réglementation des affaires, dépendant de l’endroit et de l’objectif. Le rapport de cette année présente une expansion notable de plusieurs ensembles d'indicateurs et un changement dans le calcul du classement.
A collection of work examples and a peak into the culture of Orange Sparkle Ball. See how we use our design strengths and strategic thinking to execute all kinds of design work and problem solving for our clients.
Adapting the Lean Enterprise Self-Assessment Tool for Software Development Do...Teemu Karvonen
Presentation held at Euromicro 2012 SEAA (Izmir/Cesme Turkey) )conference for paper titled: Adapting the Lean Enterprise Self-assessment tool for software domain.
ABSTRACT:
Lean principles have attracted the attention of software development companies due to their potential to improve competitiveness. However, the application of such principles in the software domain is still in its infancy. This paper presents a proposal for adapting the Lean Enterprise Self-Assessment Tool (LESAT) to guide the transformation of software development companies toward Lean. LESAT, developed by the Lean Advancement Initiative (LAI) at the Massachusetts Institute of Technology (MIT), has been widely used in other domains. In this study, concepts and expressions of LESAT were analyzed and mapped to software development following the ISO/IEC 12207 standard. Seven assessment items concerning life-cycle processes were modified from the original LESAT. The modified LESAT for software was compared with a lean assessment approach called "Lean amplifier, " which has been developed and successfully used in practice by Ericsson R&D in Finland. The results indicated that LESAT may complement lean assessment in the software domain at enterprise level, involving the entire value stream. Moreover, they clearly emphasized the role of leadership in the transformation.
http://ieeexplore.ieee.org/xpl/articleDetails.jsp?arnumber=6328160
Vskills certified HTML designer Notes covers the following concepts.
1. HTML and XHTML
1.1 Introduction
1.2 History
1.3 HTML Versions
1.4 Elements, Tags and Attributes
1.5 Head and body tags
1.6 HTML Editor
1.7 Create a web page
1.8 Viewing the Source
1.9 White Space and Flow
1.10 HTML Comments
1.11 HTML Meta Tags
1.12 HTML Attributes
1.13 XHTML First Line
1.14 DTD (Document Type Declaration)
1.15 Special Characters
1.16 Capitalization
1.17 Quotations
1.18 Nesting
1.19 Spacing and Breaks
Get complete e-book on HTML Designer.
http://www.vskills.in/certification/Web-Development/Certified-html-designer
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
HTML Basics
Welcome to HTML Basics. This workshop leads you through the basics of Hyper Text Markup Language (HTML). HTML is the building block for web pages. You will learn to use HTML to author an HTML page to display in a web browser.
Celebrating the Release of Computing Careers and DisciplinesRandy Connolly
Talk given at CANNEXUS 2020 on the release of our Computing Careers and Disciplines booklet, which has gone on to be downloaded over 200000 times since its release.
Public Computing Intellectuals in the Age of AI CrisisRandy Connolly
This talk advocates for a conceptual archetype (the Public Computer Intellectual) as a way of practically imagining the expanded possibilities of academic practice in the computing disciplines, one that provides both self-critique and an outward-facing orientation towards the public good.
Lightning Talk given at the start of the celebration evening for the ten-year anniversary of our Bachelor of Computer Information Systems at Mount Royal University.
Facing Backwards While Stumbling Forwards: The Future of Teaching Web Develop...Randy Connolly
Talk given at SIGCSE'19. Web development continues to grow as an essential skill and knowledge area for employed computer science graduates. Yet within the ACM CS2013 curriculum recommendation and within computing education research in general, web development has been shrinking or even disappearing all together. This paper uses an informal systematic literature review methodology to answer three research questions: what approaches are being advocated in existing web development education research, what are current trends in industry practice, and how should web development be taught in light of these current trends. Results showed a significant mismatch between the type of web development typically taught in higher education settings in comparison to web development in industry practice. Consequences for the pedagogy of web development courses, computer science curriculum in general, and for computing education research are also discussed.
Mid-semester presentation for my Computers & Society course at Mount Royal University. Has some technical detail about how the internet works, web protocols, data centres, and typical security threats.
Helping Prospective Students Understand the Computing DisciplinesRandy Connolly
Presentation at Cannexus 2018 in Ottawa in which we discussed the results of our three-year research project on student understandings of the computing disciplines and described the 32-page full-color booklet for advisers and prospective students.
Keynote address at barcamp: the next web conference in Salzburg on April 21, 2017. The presentation explains why textbooks in this area still make sense and describes the difficulties in writing a textbook in this area.
Talk given at University of Applied Sciences at Krems , Austria for Master Forum 2017. Provides a rich overview of contemporary web development suitable for managers and business people.
Disrupting the Discourse of the "Digital Disruption of _____"Randy Connolly
Talk given at University of Applied Sciences for Management and Communication in Vienna in January 2017. It critically interrogates the narrative of digital disruption. It will describe some of the contemporary psychological and social research about the digital lifeworld and make some broader observations about how to best think about technological change.
Every year at our new student orientation, I used to give this talk to our first year students. Instead of telling them what they should do to achieve success, we thought it would be more effective and humourous to tell them instead how best to fail your courses. This was the last version of this talk from 2017.
Red Fish Blue Fish: Reexamining Student Understanding of the Computing Discip...Randy Connolly
This 2016 presentation (for a paper) updates the findings of a multi-year study that is surveying major and non-major students’ understanding of the different computing disciplines. This study is a continuation of work first presented by Uzoka et al in 2013, which in turn was an expansion of work originally conducted by Courte and Bishop-Clark from 2009. In the current study, data was collected from 668 students from four universities from three different countries. Results show that students in general were able to correctly match computing tasks with specific disciplines, but were not as certain as the faculty about the degree of fit. Differences in accuracy between student groups were, however, discovered. Software engineering and computer science students had statistically significant lower accuracy scores than students from other computing disciplines. Consequences and recommendations for advising and career counselling are discussed.
Constructing and revising a web development textbookRandy Connolly
A Pecha Kucha for WWW2016 in Montreal. Web development is widely considered to be a difficult topic to teach successfully within post-secondary computing programs. One reason for this difficulty is the large number of shifting technologies that need to be taught along with the conceptual complexity that needs to be mastered by both student and professor. Another challenge is helping students see the scope of web development, and their role in an era where the web is a part of everyday human affairs. This presentation describes our 2014 textbook and our plans for a second edition revision (which will be published in early 2017).
Citizenship: How do leaders in universities think about and experience citize...Randy Connolly
This presentation explores the concept of citizenship based on the experience of student leaders from a mid-sized university in western Canada. Five student leaders participated in semi-structured individual interviews to explore their experience with, and understanding of, citizenship. Interviews concentrated on personal view points and definitions of citizenship, explored whether or not there are “good” and “great” citizens, and the role universities play in fostering strong citizenship amongst its student body. The measurement of citizenship and opportunities to foster citizenship were also explored. Qualitative content analysis revealed five themes, including political participation, social citizenship/solidarity, engagement, transformative action and autonomy. Citizenship, while highly valued by this population, also appears to be impossible to measure. If post-secondary institutions are aiming to create better citizens, more work needs to be done to create a common understanding of the intended outcome. Based on these findings, a new potential model of citizenship is proposed, in line with the work of Dalton and others who emphasize a shift towards personal involvement over traditional political engagement. Further, these results suggest that students could benefit from understanding themselves as political agents, capable of inculcating change within the university context and beyond.
Presentation for a guest lecture for a colleague's Media History and Contemporary Issues course. She wanted me to cover technological determinism and social constructivism, as well as through in some content about my research on multitasking and online reading.
A longitudinal examination of SIGITE conference submission dataRandy Connolly
Presents our examination of submission data for the SIGITE conference between the years 2007-2012. SIGITE is an ACM computing conference on IT education. The presentation describes which external factors and which internal characteristics of the submissions are related to eventual reviewer ratings. Ramifications of the findings for future authors and conference organizers are also discussed. If you want to read the full paper, visit http://dl.acm.org/citation.cfm?id=2656450.2656465
This presentation is based on the 16th chapter of our textbook Fundamentals of Web Development. The book is published by Addison-Wesley. It can be purchased via http://www.amazon.com/Fundamentals-Web-Development-Randy-Connolly/dp/0133407152.
This book is intended to be used as a textbook on web development suitable for intermediate to upper-level computing students. It may also be of interest to a non-student reader wanting a single book that encompasses the entire breadth of contemporary web development.
This book will be the first in what will hopefully be a textbook series. Each book in the series will have the same topics and coverage but each will use a different web development environment. The first book in the series will use PHP.
To learn more about the book, visit http://www.funwebdev.com.
Is Human Flourishing in the ICT World of the Future Likely?Randy Connolly
The role that information and computing technology (ICT) plays in improving human flourishing is not always clear. This presentation examines current research on one aspect of ICT, namely electronic reading, to demonstrate that in this case the ICT in question may actually diminish flourishing. It begins with an overview of the idea of flourishing in positive psychology, and then presents research on electronic reading comprehension, multitasking and distraction, and online scanning behaviors. The paper then makes an argument about the close connection between reading and flourishing, and then concludes by hypothesizing that mindful‐based reading practices may mitigate some of the worst features of electronic reading.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
Communications Mining Series - Zero to Hero - Session 1DianaGray10
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
GridMate - End to end testing is a critical piece to ensure quality and avoid...ThomasParaiso2
End to end testing is a critical piece to ensure quality and avoid regressions. In this session, we share our journey building an E2E testing pipeline for GridMate components (LWC and Aura) using Cypress, JSForce, FakerJS…
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
2. 1 INTRODUCTION
2 HTML
3 TABLES
4 FORMS
5 HTTP
6 CSS
7 CSS FRAMEWORKS
8 DIGITAL MEDIA
2 9 USABILITY
3. HTML Standard
3
Hypertext Markup Language
While initially developed by Tim Berners-Lee of
y p y
CERN in 1990, the World Wide Web Consortium
(
(W3C) now officially controls HTML standard.
) y
In practice, Netscape, then Microsoft controlled the
development of HTML
HTML.
Tags added or supported by their browsers
influence/control the HTML standard
standard.
4. HTML Standard
4
From around 2002/3, there has been movement back to having
F d 2002/3 th h b tb kt h i
W3C control the standard for HTML
W3C standards:
HTML 3.2
HTML 4.01
XHTML 1.0
XHTML 1.1
XHTML 2.0
Now, most recent versions of browsers are h i to follow the
N i fb having f ll h
standards
FireFox supports XHTML 1.1
IE 6 (almost) supports XHTML 1.0
IE 7 (almost) supports XHTML 1.1
5. XHTML
5
XHTML (Extensible HTML) as a standard came
about due to browser inconsistencies.
Fewdifferences between HTML and XHTML
XHTML is stricter than HTML and has additional rules.
As well, several tags and many attributes are no longer
supported.
6. Tags Defined
6
HTML d fi
defines elements which are i di t d b t
l t hi h indicated by tags.
The basic HTML tag has four parts:
An opening delimeter, the < symbol
p g , y
The Tag name
Optional list of attributes that modify the way that tag works.
A closing delimeter the > symbol
delimeter,
A typical tag might look like this:
<p align="center">
Tags are not case sensitive.
However, in XML (eXtensible Markup Language) and XHTML, tags must
be lower-case.
If your browser encounters a tag it doesn’t support, it simply ignores
it.
See page(s): 94 ff
7. Containers
7
Most
M t HTML t tags are containers, meaning the beginning t
t i i th b i i tags must be tb
matched by a closing tag.
The end tag will have same name as start tag but preceded with a
slash (/).
l h (/)
For example:
This is <b>Bold text</b> but not this
This is <b>Bold text</b> but not this
Will result in:
This is Bold text but not this
The text enclosed within the tags will follow the tag’s instructions.
For some tags, the end tag is optional.
XHTML standard requires all tags to be closed
closed.
For those tags without end tags in the HTML original (e.g., <br>) then
close tag is contained within tag (e.g., <br/>)
See page(s): 71
8. Nested Tags
8
Tags can be nested.
Hello <b><i>emphasized</i></b> there
will result in
hello emphasized there
i
The order is important.
<b>This word is <i>emphasized</i> here </b> Correct (no overlapping lines)
<b>This word is <i>emphasized</b> here </i> × Incorrect (overlapping lines)
9. Attributes
9
Attributes t d
Att ib t extend or modify the way a tag operates.
dif th t t
Most (but not all) tags accept several attributes.
order of attributes is unimportant
p
Most attributes take values, which follow an equal sign (=). For
example,
<p align=left>
<font face="arial, tahoma">
<a href="http://www.abc.com">
<body bgcolor="#ffcc00">
Strictly speaking, values should be enclosed in straight quotes (" "
y p g, g q (
not “ ”).
You can omit the quotes if the value contains only letters, digits, hyphens,
or periods.
XHTML requires quotes around attributes.
Browsers ignore unknown attributes.
10. Information Browsers Ignore
10
line breaks displays as
He Hello there
llo t
here
tabs and multiple spaces
Hello there Hello there
multiple <P> tags Hello
Hello<P><P><P><P><P>There
there
unrecognized tags and attributes
<randy nose=large>hello there</randy> Hello there
text in comments
<!-- this is a comment --!>
12. XHTML Differences
12
XHTML is case sensitive and thus tags must be
lowercase
XHTML requires attributes to be quoted
XHTML requires all tags to be closed
13. HTML Editing
13
HTML documents are simple ASCII text files
as such, you can use Notepad, Word, or any other
program that can write ASCII text files.
There are specific HTML-creation tools. They fall
p y
under two general categories:
WYSIWYG (What You See Is What You Get) authoring
tools
HTML Editors
14. WYSIWYG Authoring Tools
14
Tools with graphical interfaces that make writing
f
HTML more akin to working with a word processor.
Instead of typing tags, you can select commands from
pull down menus, and click and drag items.
Th
These programs t t shield th user f
try to hi ld the from th t
the tags
Theoretically, the user doesn’t need to know HTML
Examples
E l
Microsoft
FrontPage and Microsoft Visual Studio
Adobe Dreamweaver
Adobe GoLive
17. WYSIWYG Authoring Tools
17
Advantages
Ad t
good for beginners
good for quick prototyping
can save bother of writing
Disadvantages
often generate bad HTML or browser-specific HTML (e.g.,
FrontPage)
often will automatically change an HTML document when opened,
y g p ,
removing tags it doesn’t like or support (e.g., FrontPage)
never true WYSIWYG
that is, the result often looks different in browser than in WYSIWYG
is
program, and unless you know HTML you cannot fix it.
However, with better browser support of standardized XHTML,
WYSIWYG tools are getting better and better
g g
18. WYSIWYG Problems
As displayed in Dreamweaver As displayed in FrontPage
Viewed in Netscape 4
18 Viewed in Internet Explorer 4
19. HTML Editors
19
Programs that facilitate the process of
entering/typing HTML
user still needs to know HTML
Examples
Notepad
HomeSite
BBEdit
22. Structure of HTML
22
The two basic parts of a web page are:
The head
The body
23. HTML Skeleton
23
<html> <html> defines the beginning of the HTML
document
<head>
h d
<head> defines the beginning document
<title>My Mom</title> header, which contains information about
the document
</head>
<title> is displayed in browser title bar
<body> and used for bookmarks
Contents here <body> contains the content to be
displayed in browser window
</body>
</html>
24. html element
24
Should contain namespace and language
declaration.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Note: the xmlns attribute is required in XHTML but is
invalid in HTML
HTML.
25. DOCTYPE Declaration
25
XHTML requires that an HTML document needs a
DOCTYPE declaration as the first element.
Itspecifies which document type definition (DTD) you
are following.
Current browsers can use this information to help
determine which rules it should use to display the
markup (i.e., should it use strict XHTML rules, no XHTML,
or both).
See page(s): 107
26. DOCTYPE Declaration
26
Possible DOCTYPEs:
P ibl DOCTYPE
XHTML 1.1
Only supported by FireFox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 1//EN"
-//W3C//DTD 1.1//EN
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.0 strict
Supported by Firefox and IE 7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML transitional
Supported by FireFox, IE6 and later
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
None / Q i k mode
N Quirks d
No use of standards
Default if no valid DOCTYPE present
27. The <head>
Th <h d>
27
The head
Th h d section provides information
i id i f i
about the document.
The following elements can be within the
head
<meta> Provides additional information about the document
<title> Displayed by browser in title bar. Required
for HTML 3.2 compatibility.
<script> Contains Javascript code
<style> Contains style sheet information
<link> For linking to an external style sheet file
28. <meta> Element
<meta> Element
28
Meta tags were intended to provide additional semantic meaning (meta information) to web
(meta-information)
pages.
Early search engines used them, but due to abuses, most search engines now heavily discount
them.
Two styles:
<meta http-equiv="name" content="content">
<meta name="name" content="content">
e.g.
g
<meta name="description" content="randy’s home page">
<meta name="keywords" content="first, second, third">
<meta name="expires" content="01 j
p jun 2007">
<meta name="robots" content="index,nofollow">
29. <script> Element
<script> Element
29
Used to contain a client-side script
Usually Javascript, but could also be VBScript (IE only)
Often contained with the <head> but valid
anywhere.
E.g.
<script type="text/javascript">
type text/javascript >
document.write("Hello World!");
</script>
30. <style> and <link>
30
elements
Both contained within <head>
<style>
Used to define a CSS style(s) in a document.
<style type="text/css" >
type text/css
h1 { font-weight: bold; font-size: 18pt; }
</style>
<link>
Generally used to define a link to an external stylesheet.
<link rel="stylesheet" type="text/css" href="theme.css" />
31. <b d > El t
<body> Element
31
Contains the contents of the d
C h f h document
Can contain the following attributes, which allow
you to specify global settings (i.e., for entire
(i e
document) for background image and color as
well as text colors:
background=url Specifies a background picture, where url is
the name (and path) of the picture file. The
picture is tiled and set behind all images and text
bgcolor=color Specifies background color of page
text=color Sets the color of normal text
link=color Sets the color of hypertext links
vlink=color Sets the color of visited hypertext links
yp
For XHTML strict, do not use these attributes.
32. Body Margins
32
By default, browsers have a margin of 10 to 12
pixels.
The margin varies depending upon the browser and
platform.
Internet Explorer 5 Netscape 4
33. Body Settings
33
To set colors images, and margins, and
colors, images margins
other stylistic settings, you should use CSS.
e.g.,
<style>
body {
background-color : #
b k d l #FFFFFF;
background-image: url(images/Pattern1.gif);
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #000088;
margin: 0px;
}
</style>
34. Color
C l
34
Color can be specified in three ways
"#rrggbb"
"#rgb"
"color name"
rrggbb is a hexadecimal RGB (red-green-blue)
p
triplet
FFFFFF=white 000000=black FF0000=red
00FF00=green FFFF00=yellow OOFFFF=cyan
rgb is converted to rrggbb by replicating digits.
# 6C
#F6C == # 66CC
#FF66CC
HTML 4.0 supports 16 color names
Browsers supports 140 color names
35. Semantic markup
35
To benefit from XHTML, you need to think about your
T b fit f XHTML d t thi k b t
markup in semantic (meaning) rather than visual
terms.
XHTML markup is not about presentation; it's about
document structure and content (meaning).
That is, we should use XHTML as HTML was originally
intended.
We should structure our document into headings, lists
headings lists,
paragraphs.
We should use HTML elements because of what they mean,
not because of the way they "look."
tb f th th "l k "
We can change the way elements look via CSS.
36. Structuring Text
36
There are a number of ways of structuring blocks of
text.
breaking text into paragraphs and lines
using headings to create sections
g g
grouping info into lists
37. Paragraph and Line Breaks
37
You can't use carriage returns to create new
'
paragraphs or to break lines
The <br/> tag creates line breaks
multiple <br/> tags okay, but discouraged
The <p> tag creates paragraph breaks
multiple <p> tags ignored
<p> isa container and thus needs a </p>
The <div> tag also creates paragraph breaks, but
<div>
should be used to indicate a section (which might
contain multiple <p> tags.
p p g
38. <html><head><title>line and Paragraph Breaks</title></head>
<body bgcolor="white">
HyperText Markup
Language, a markup <br/> language defined by an SGML Document Type Definition
(DTD).To a document writer,<p>
HTML is simply a collection of tags used to mark blocks of
text and assign them <p align="right">special meanings.
g p g g p g
</body></html>
38
39. Styling the <p> and <div>
39
Do not use align attribute of <p> or <div>.
Do not use <p> tags just to create space.
p g j p
Use it to indicate a logical paragraph.
Use the <div> tag to indicate a section of paragraphs
<div> paragraphs.
Instead, you can use CSS to style or position the
text.
t t
40. CSS <p> and <div>
40
<div id="preamble">
id preamble >
<p class="p1">
Littering a dark and dreary road lay the past relics of browser-specific tags,
incompatible DOMs, and broken CSS support.
</p>
<p class="p2">
Today, we must clear the mind of past practices. Web enlightenment h
d l h i d f i b li h has b
been achieved thanks to the
hi d h k h
tireless efforts of folk like the W3C, WaSP and the major browser creators.
</p>
</div>
41. Headings <h1>, <h2>, etc
41
There are six levels of heading
Level 1 is the largest and level 6 the smallest
g
Most browsers allow user to alter relative size
We
W can use CSS to determine the precise
t d t i th i
appearance
Examples
<h1>This is a big heading</h1>
<h3>smaller heading</h3>
42. Old School Headings
42
<html><head><title>Headings</title></head>
<body bgcolor="white">
<h1>HTML Defined</h1>
HyperText Markup Language, a markup language defined by an
SGML Document Type Definition (DTD) To a document writer HTML is simply a collection
(DTD). writer,
of tags used to mark blocks of text and assign them special meanings.
<h3 align=center>HTML Introduction</h3>
Here is some more text
</body>
</html>
44. Lists
44
There are three types of lists
Unordered, or bulleted lists
Ordered, or numbered lists
Definition lists
45. Unordered Lists < l>
U d d Li t <ul>
45
<ul>
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ul>
/
46. Ordered Lists < l>
O d d Li t <ol>
46
<ol>
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ol>
/
47. Definition Lists <dl>
47
<dl>
<dt>happy</dt>
<dd>feeling or expressing joy</dd>
<dt>sad</dt>
<dd>Expressive of sorrow or unhappiness</dd>
/
</dl>
49. Formatting Characters
49
These tags change the emphasis and appearance
of characters within blocks of text.
These tags also referred to as inline type styles as the
tags appear within lines of text.
Two categories
logicaltags
physical tags
50. Logical Style Tags
L i l St l T
50
Describes the text's meaning, context,
D ib h ' i
or usage; it does not describe how it is
to b displayed (the browser
be d l d(h b
determines that).
Examples:
<em> Characters are to be emphasized (often italic)
<strong> Emphasized more (often bold)
<code> Characters are code sample (often courier)
<acronym> Defines an acronym (e.g., ASP)
<span> Used to group inline elements
51. Physical Style Tags
51
Indicates exactly the way the text is to be
formatted
XHTML
Some of these (<font>, <u>, <s>) are prohibited
Even if not prohibited, use of these is discouraged in
XHTML
Use logical style instead
Examples
p
<B> Bold <U> Underline
<I> Italic <S> Strikethrough
<TT> Monospaced
M d
<FONT> Font
52. Linking
52
Your web site should be a collection of several
separate pages connected together via hypertext
links
Hyperlink is created via anchor tag <a> and the
yp g
document's unique address known as a URL (Uniform
Resource Locator).
Links can be to created to:
j
jump t an external site
to t l it
jump to another page in the current site
jump to another part of the current page
53. Linking
53
A link has three parts:
a destination
a label
a target
g
54. Linking
54
The destination is the most important part. It
specifies what page will be loaded when user clicks.
The label specifies the text of the hyperlink.
The target is optional It determines where the
optional.
destination will be displayed.
The target might be a new window, a different frame
window frame,
or, most common, the current window.
55. The Anchor Tag <a>
55
Label
L b l
<a href="http://www.mtroyal.ab.ca">Click here</a>
Destination
<a href="www.mtroyal.ab.ca" target="_blank">Click here</a>
Target (this would display page in new window)
<a name="top">
Defines l
D fi location for internal link
ti f i t l li k
<a href="#top">Click here to go to top of page</a>
Destination is internal link (i.e., within current page)
56. Absolute URLs
56
Absolute URL
used to specify exactly where a file is located.
used for linking to an external site.
Three parts:
protocol (e.g., HTTP://, FTP:// )
host/server name (e.g., www.microsoft.com)
path name, if necessary (e.g., / ff /
f /office/word )
file name (e.g., index.htm, exam.cgi, menu.jpg)
Example:
http://www.microsoft.com/office/word/index.htm
57. Absolute URLs
57
File-based b l
Fil b d absolute references should not b
f h ld t be
used for referencing files within your own site. For
example:
l
C:/My Documents/comp1274/assign2/product.htm
Why?
when y
you move y your site to y
your web server, y
, your
links (and image references) will not work (since it is
quite likely that your files will not be on the same
drive and directory on the server).
You should almost always use relative references
for referencing files within your own site!!
58. Relative References
58
A reference to another document relative to the
location of the document that contains the reference.
Some Folder
href=products.html
index.html products.html
59. Root Reference
59
Another thing to be aware of is that a reference
that begins with the slash is a root reference.
A root reference is an absolute references.
60. Root Reference
60
A root reference has a different meaning on the
web server than it does on your local machine.
e.g.,/images/logo.gif
On a local machine without a web server, the root
,
reference (e.g., “/”) refers to the root of the physical
drive.
Thus the above example references a file in the folder
images which is in the root of the drive.
i.e., it will reference c:/images/logo.gif
61. 61
Root Reference
e.g., /images/logo.gif
On the web server, this references a file in the folder
images which is in the root of the site.
g
Remember that a web server can host multiple sites.
Each site is contained within its own “virtual” folder that is
independent of each site’s actual physical location.
p p y www.abc.com
So, on a web server the root reference (e.g., “/”)
refers to the root of the site’s virtual folder, not the root
of the physical drive. www.xyz.com
62. 62
Referencing Syntax
The synatx used is based on the UNIX
y
operating system (but similar to DOS)
Slash separates folder from file name
p
products/sales.htm
/
Slash separates folder from folder name
web/products/sales.htm
A slash in front of first folder name means
root directory
/file.htm
/My Documents/file.htm
Documents/file htm
Use forward slash (/) not backslash ()
Use .. to move up a folder
../My Documents/file.htm
63. <img src=????>
img src ????
Q: in sales.htm, how would we reference pants.htm ?
A)
) p
pants.htm
B) products
C) C:/My Documents/web/products/pants.htm
D) /products/pants.htm
E) products/pants.htm
63
64. <img src=????>
img src ????
Q: in pants.htm, how would we reference sales.htm ?
A)
) sales.htm
B) web/sales.htm
C) C:/My Documents/web/sales.htm
D) /products/sales.htm
E) ../sales.htm
64
65. <img src=????>
img src ????
Q1: in pants.htm, how would we reference hats.htm ?
Q2: in sales.htm, how would we reference index.htm ?
65
66. Q: in fred.htm, how would we reference pants.htm ?
A) pants htm
pants.htm
B) ../products/pants.htm
C) /products/pants.htm
D) products/pants.htm
E) ../pants.htm
66
67. URLs
URL
67
Have the following syntax:
protocol://server domain name/path/filename
For
F example:
l
http://www.this_server.com/docs/index.html
http://www.mtroyal.ab.ca/
ftp://ftp.shareware.com/pub/file.zip
absolute references
mailto://bgates@microsoft.com
courses/1235.html Another page in the current site
#bottom Defined location in current page relative references
Defined location in another
1235.html#bottom page in current site
68. Anchor Tag, continued
68
Usual attributes:
href="url" Defines destination.
name="name"
name "name" Defines target for i
D fi f internal h
l hypertext li k
link.
target="window" Link should be loaded into window or frame.
Not supported in XHTML Strict.
window can have the following values:
_blank
bl k loads d
l d document i new b w window
t in w browser wi d w
_parent loads into parent of current document
_self loads into current window
_top loads into main browser window
frame name loads into named frameset (if doesn't exist then
loads i t
l d into new window)
i d )
69. Hyperlink Example
69
Here is some text<br/>
/
Click <a href="index.html">right here</a> will open the index
page we created earlier<br/>
Click <a href="#bottom">here</a> will take us to bottom of this
p g
page<br/>
/
blah, blah blah ...
...
...
<a id="bottom">This is the bottom</a>
/
70. Images
70
Two general classes of images
inline images
appear on a web page along with text and links and are
automatically displayed by browser when page is loaded
external images
stored
separately from web page and are loaded only on
demand (usually as a result of a link).
Images are graphical picture files that are
downloaded and displayed by browser.
Image files must be GIF or JPG or PNG format.
g
71. How Graphics Can Be Used
71
As a simple graphic
As a link
As an imagemap
a simple graphic in which multiple hotspots/links have
been defined
As
A spacing d i
i devices
many designers use a single transparent pixel that can
be i d
b resized to create white space
hi
72. <img> Tag
<i > T
72
Graphics displayed by the <img> tag. For
example:
<img src="image.gif" />
Accepted attributes:
src="filename" specifies path or filename of file
alt="description" text to be displayed in place of image
width="n" width of image in pixels
g p
height="n" height of image in pixels
longdesc="url" A URL to a document that contains a long description of the image
usemap="url" indicates image is client-side imagemap
Title=“description”
73. Graphics as Links
73
To make a graphic a link place anchor
link,
tags around the IMG tag. For example:
<a href="mtequip htm"><img src="pack gif“ /></a>
href mtequip.htm ><img src pack.gif
When an image is a link, it will have a
border around it to indicate it has a link
link.
Mostdesigners prefer not to have this
border
We can use CSS to remove it
default
74. Alternative Text
74
The alt attribute allows you to specify a string of
alternative text to be displayed in place of an
image.
displayed while image is downloaded
displayed if graphic display is turned off
Very important for accessibility reasons (i.e., for
visually-impaired using Voice Reader software
some browsers display alt attribute as pop-up tip
pop up
when mouse positioned over image
75. Alternative Text
75
<img src="pack.gif“ />
<img src="pack.gif" alt="Really Blue Pack" />
Really Blue Pack
76. Image Width and Height
76
width and height indicate the dimension of image.
While optional, the use of these attributes is
p ,
recommended because:
they allow browser to lay out page even before images
are downloaded
You can use these attributes to resize an image
however,it is generally better to resize image in an
image editor because:
image editors often have better quality interpolation
methods for resizing (i.e., it better quality resize)
often faster download (see next slide)
78. Original image
Width: 100
Height: 249
Image resized in
esi ed Image resized in
esi ed
image editor browser
Width: 200 Width: 200
Height: 498 Height: 498
78
79. Q: in products.htm, how would we display menu.gif
products htm menu gif
<img src=????>
<img src=menu.gif>
<img src=c:/westgear/images/menu.gif>
<img src=/westgear/images/menu.gif>
<img src=westgear/images/menu.gif>
<img src=images/menu.gif>
79
80. Q: in products.htm, how would we display menu.gif
products htm menu gif
<img src=????>
<img src=images/menu.gif>
<i i / if>
<img src=c:/westgear/menu.gif>
<img src=/westgear/menu gif>
src=/westgear/menu.gif>
<img src=westgear/menu.gif>
<img src=c:menu.gif>
g g
<img src=menu.gif>
80
81. Two Types of Image Map
81
An image map is a graphic image in which multiple
links have been defined.
Two Types:
Server-Side
Server Side Image Maps
Implemented using an image displayed by the client and a
program that runs on the server. Not really used anymore.
Client-Side Image Maps
Works the same as above except there is no program run on
p p g
the server. All processing of coordinates occurs in the
browser.
83. Creating a client-side IM
client side
83
The first thing you need is the image onto which you
want to map the link. This can be any GIF or JPEG
image.
i
The second step is to use map tags to define the image
map. Y do this within your HTML fil
You d hi i hi file.
The final step is add a attribute to the image tag, to
tell the b
ll h browser to use the image as an image map
h
instead of a normal image
84. <map> Tag
84
<map> starts a map definition.
Ithas one attribute, name. The name you are giving this
map definition must be surrounded by quotation marks.
For example:
<map name="mainmap">
In between comes one or more <area> tags.
</map> ends the map definition.
85. <area> Tag
85
<area> defines each clickable area on the image
and its link. You may have many area tags within a
map definition. It has 3 attributes:
shape="rect/circle/poly/point" defines the
shape of the linked area.
coords="X,Y,X,Y" are the coordinates of the linked
area.
For a rectangle you set the upper left and lower right x,y
coordinates. For a circle you set the center-point and a point
y p p
on the circumference, on a polygon you specify every angle.
href="link" sets the link for the specified area by
identifying h linked URL. Th
id if i the li k d URL The URL can be either a full or a
b ih f ll
relative URL.
86. Using the Image Map
86
The final step in using an image map is inserting the
image into your file and naming the image map
definition. This is quite straightforward and involves
simply adding a new image attribute called
"usemap."
Example:
<img src="mainmap jpg" width=46 height=26 usemap="#mainmap" />
src= mainmap.jpg usemap= #mainmap
87. Example Map Definition
87
<img src="menu.gif" width="369" height="31" usemap="#linkbar" />
<map name="linkbar">
<area shape="rect" coords=" 11,5, 73,29" href="products.htm"></area>
<area shape="rect" coords=" 75,5,137,29" href="stories.htm"></area>
<area shape="rect" coords="140,5,198,29" href="orders.htm"></area>
<area shape="rect" coords="200,5,288,29" href="community.htm"></area>
<area shape="rect" coords="289,5,366,29" href="contact.htm"></area>
</map>
As displayed in browser
p y
With hot spots indicated
88. Drawbacks to ImageMaps
88
Imagemaps are almost unusable until most of image
is downloaded.
Image map menu What it looks like while
downloading (or if images
turned off)
89. Alternatives to Image Maps
89
Split image into smaller images, and reassemble
using tables (our next topic) or CSS.
Create image links as per slides. E.g.,
<a href="browse.htm"><img src="menur2c4.gif" alt="browse“/></a>
< h f "b ht "><i " 2 4 if" lt "b “/></ >
Split i
S lit image with table
ith t bl
borders displayed
Split image with table
borders turned
bo de s t ned off
90. Accessibility and XHTML
90
Accessibility refers to the process of making web
pages usable (accessible) to users with visual
disabilities.
These users use screen reader software such as JAWS.
A web page whose markup is cleanly focused on
content and which contains no formatting is significantly
g g y
easier to comprehend for the blind.
US and Canadian governments require accessible sites.
g q
91. Who is the Most Important Blind User?
91
Search Engines!!!
92. Accessibility and XHTML
92
http://www.youtube.com/watch?v=VGeppPO5lQ0
http://www.youtube.com/watch?v=tNFPHLiO-os
http://www youtube com/watch?v tNFPHLiO os
http://www.youtube.com/watch?v=d5oZf9ULAyw
p y y
http://www.youtube.com/watch?v=0ftQIQ91Ff4
93. HTML5
93
The next version of HTML
Notice that it is NOT XHTML
In 2009, W3C stopped work on XHTML 2.0, and
switched focus to HTML5.
Somecontroversy: perception that with HTML5 the browser
manufacturers have taken back control of the web.
94. Browser Support
94
Still uneven
Main problem, no HTML5 support in IE8 and below
95. HTML5
95
Design principles:
Don’t break existing web pages
Error handling
Adding markup to simplify web page structure
g p p y p g
96. Minimal Structure
96
<! DOCTYPE html>
! OC ht l
<title>something</title>
<h1>heading</h1>
<p>some text blah</p>
<p>some te t blah</p>
Yes, no head or body tags needed!
97. Typical HTML Layout Structure
97
<div id=“header”>
di id “h d ”
<div id=“menu”>
</div>
</div>
<div id=“sidebar”>
</div>
</di >
<div id=“content”>
</div>
98. New Tags
98
New tags have been added to make the markup
more semantic (more meaningful).
Thatis, the usual <div id="something"> hodgepodge
has been partially replaced with common markup
elements.