Dynamic HTML is a collective term for a combination of Hypertext Markup Language (HTML) tags and options that can make Web pages more animated and interactive than previous versions of HTML. Much of dynamic HTML is specified in HTML 4.0. Simple examples of dynamic HTML capabilities include having the color of a text heading change when a user passes a mouse over it and allowing a user to “drag and drop” an image to another place on a Web page. Dynamic HTML can allow Web documents to look and act like desktop applications or multimedia productions.
The Concepts and Features in Dynamic HTML
- An object-oriented view of a Web page and its elements
- Cascading style sheets and the layering of content
- Programming that can address all or most page elements
- Dynamic fonts
What is HTML?
HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.
HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:
My cat is very grumpy
If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:
<p>My cat is very grumpy</p>How does HTML work?
HTML stands for HyperText Markup Language. “Markup language” means that, rather than using a programming language to perform functions, HTML uses tags to identify different types of content and the purposes they each serve to the webpage
Where is HTML used?
HTML is used to create electronic documents (called pages) that are displayed on the World Wide Web. Each page contains a series of connections to other pages called hyperlinks. Every web page you see on the Internet is written using one version of HTML code or another.
What is HTML syntax?
Syntax is the arrangement of elements and attributes to create well-formed documents. … In HTML, this is the purpose of elements and attributes, and the logical (sense and reference) relationship between elements and the attributes of those elements.
What are the 10 basic HTML tags?Your First 10 HTML Tags
- <html> … </html> — The root element. …
- <head> … </head> — The document head. …
- <title> … </title> — The page title. …
- <body> … </body> — The page’s content. …
- <h1> … </h1> — A section heading. …
- <p> … </p> — A paragraph. …
- <a> … </a> — A link. …
- <img> — An image. The img element lets you insert images into your web pages.
Anatomy of an HTML element
Let’s explore this paragraph element a bit further.
The main parts of our element are as follows:
- The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
- The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
- The content: This is the content of the element, which in this case, is just text.
- The element: The opening tag, the closing tag, and the content together comprise the element.
Elements can also have attributes that look like the following:
Attributes contain extra information about the element that you don’t want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things.
An attribute should always have the following:
- A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
- The attribute name followed by an equal sign.
- The attribute value wrapped by opening and closing quotation marks.
Note: Simple attribute values that don’t contain ASCII whitespace (or any of the characters " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.
Nesting elements
You can put elements inside other elements too — this is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word “very” in a <strong> element, which means that the word is to be strongly emphasized:
<p>My cat is <strong>very</strong> grumpy.</p>You do however need to make sure that your elements are properly nested. In the example above, we opened the <p> element first, then the <strong> element; therefore, we have to close the <strong> element first, then the <p> element. The following is incorrect:
<p>My cat is <strong>very grumpy.</p></strong>The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don’t do it!
Empty elements
Some elements have no content and are called empty elements. Take the <img> element that we already have in our HTML page:
<img src="images/firefox-icon.png" alt="My test image">This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn’t wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.
Anatomy of an HTML document
That wraps up the basics of individual HTML elements, but they aren’t handy on their own. Now we’ll look at how individual elements are combined to form an entire HTML page. Let’s revisit the code we put into our index.html example (which we first met in the Dealing with files article):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>Here, we have the following:
<!DOCTYPE html>— doctype. It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However these days, they don’t do much and are basically just needed to make sure your document behaves correctly. That’s all you need to know for now.<html></html>— the<html>element. This element wraps all the content on the entire page and is sometimes known as the root element.<head></head>— the<head>element. This element acts as a container for all the stuff you want to include on the HTML page that isn’t the content you are showing to your page’s viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.<meta charset="utf-8">— This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this and it can help avoid some problems later on.<title></title>— the<title>element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.<body></body>— the<body>element. This contains all the content that you want to show to web users when they visit your page, whether that’s text, images, videos, games, playable audio tracks, or whatever else.
Images
Let’s turn our attention to the <img> element again:
<img src="images/firefox-icon.png" alt="My test image">As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.
We have also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:
- They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
- Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your
srcattribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:
The keywords for alt text are “descriptive text”. The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of “My test image” is no good at all. A much better alternative for our Firefox logo would be “The Firefox logo: a flaming fox surrounding the Earth.”
Try coming up with some better alt text for your image now.
Find out more about accessibility in our accessibility learning module.
Marking up text
This section will cover some of the essential HTML elements you’ll use for marking up the text.
Headings
Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1>–<h6>, although you’ll commonly only use 3 to 4 at most:
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>Now try adding a suitable title to your HTML page just above your <img> element.
Note: You’ll see that your heading level 1 has an implicit style. Don’t use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.
Paragraphs
As explained above, <p> elements are for containing paragraphs of text; you’ll use these frequently when marking up regular text content:
<p>This is a single paragraph</p>Add your sample text (you should have it from What will your website look like?) into one or a few paragraphs, placed directly below your <img> element.
Lists
A lot of the web’s content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:
- Unordered lists are for lists where the order of the items doesn’t matter, such as a shopping list. These are wrapped in a
<ul>element. - Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an
<ol>element.
Each item inside the lists is put inside an <li> (list item) element.
For example, if we wanted to turn the part of the following paragraph fragment into a list
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>We could modify the markup to this
<p>At Mozilla, we’re a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together ... </p>Try adding an ordered or unordered list to your example page.
Links
Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — <a> — “a” being the short form for “anchor”. To make text within your paragraph into a link, follow these steps:
- Choose some text. We chose the text “Mozilla Manifesto”.
- Wrap the text in an
<a>element, as shown below:<a>Mozilla Manifesto</a> - Give the
<a>element anhrefattribute, as shown below:<a href="">Mozilla Manifesto</a> - Fill in the value of this attribute with the web address that you want the link to link to:
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
You might get unexpected results if you omit the https:// or http:// part, called the protocol, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.
href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for hypertext reference.
Add a link to your page now, if you haven’t already done so.
If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also view it here):
If you get stuck, you can always compare your work with our finished example code on GitHub.
Here, we have only really scratched the surface of HTML. To find out more, go to our Learning HTML topic.
IMPORTANCE OF HTML
Html is important because,,You can use HTML (Hypertext Markup Language) for formatting if you like spending a long time doing inline formatting and don’t like CSS. HTML is the foundation of a website it contains the information that tells the browser what is on the page in terms of text, links, where to find images. It also gives priorities to text, is it a header? Is it a paragraph? Is it a sub heading.You can also style individual words in HTML to make them, bold, italic, underline etc. It is like the skeleton of a webpage, it tells you what kind of creature you are dealing with and how all the limbs are organised.CSS (Cascading Style Sheet), is a sheet of instructions that tells you how your webpage is organised and what it looks like in more detail. It adds the skin, eyes, hair and clothes to our skeleton HTML. You can change the colour/font/size/style of large chunks of text at a time. You can use it to move blocks of text and pictures around on your page. You can also use coding shortcuts (like bookstrap) to make this even easier.And finally Java script is the muscles and ligaments of our creature. It animates webpages, making menus appear and dissapear.If you are really interested then websites like codeacademy or one of a thousand phone apps will teach you more and let you play with the code yourself.I hope this helpsAlice .
Advantages of DHTML
DHTML is fairly fast when loading depending on your PC, It enables the web-page to look up-to-date & interactive, It enables the web-page to look more professional by having the roll-over buttons, the drop-down bars, etc, The people will trust you and they will enjoy being on your website.
DHTML is very fast, It loads content on the fly, The whole page loads with the content part which needs to be altered, so, It helps to save the time for the users and give the superb look to the website.
The dynamic features possessed by DHTML are helping the web designers to create the web pages that posses compact looks, downloads fast, have graphic effects, It provides greater functionality and it can hold much more text or content all at the same time.
XML DHTML is more efficient for content management purposes, By using more dynamic XML to create the pages, you will be able to import high volumes of text and other information (with the templates use) without spending the time coding pages individually.
The result of this saves the web designers time because there are few files to maintain, XML offers a lot of compatibility and it can work with the other Internet capable devices such as the cell phones and PDAs, It works well in the other formats including PDF, the plain text and multiple Internet browsers.
The clients like this type of website because it allows them to make the changes to their data (such as the inventory list) and they do not interfere with the coding and design of the website, There are new features and capabilities that are easier for the web designers to develop with DHTML style pages.
Disadvantages of DHTML
DHTML offers the great deal of different utilities and tools to use but these come with the price and can be costly, Creating and editing your website involves lots of detailed coding, If you are not familiar with coding, CSS, HTML, you will find it very difficult to create the nice looking, working website.
DHTML provides great functionality but the DHTML editors’ available in market are very expensive, DHTML editors such as Dreamweaver and Fusion, There are long and complex coding in DHTML, But only the expert javascript and HTML programmers can write them and edit them with good degree of functionality.
DHTML suffers from the browser support problems for different browsers, the code that is written for Netscape can not work in internet explorer and Vice-Versa, The problem arises due to the various features of the browsers, When writing the code, if you don’t check what is compatible with different browsers, It will not work and you will waste your time.
Between the users using the internet explorer and Netscape navigator, DHTML has become less popular in the recent times and the features of DHTML are now created in CSS languages by themselves, the features can be made in Flash, so, The flash websites are becoming more popular.
The dynamic websites (DHTML) are easier to manage and maintain content but they have a higher initial cost than the static HTML websites, If the business change their HTML site to DHTML, they should consider the time involved to train their staff (or hire more experienced IT personnel).
DHTML (dynamic HTML) is used to create the animation on the web page like the rollover buttons or the drop down menus, as well as being used to make the browser-based games, There are platform problems with DHTML due to different web languages.
Drop your comment
