What Is HTML
Download
Report
Transcript What Is HTML
HTML vs FrontPage &
Dreamweaver
Ali Al Bastaki
What is HTML?
HTML is the standard markup language for creating Web pages:
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the
page
What is HTML?
HTML is a computer language devised to allow website creation. These websites
can then be viewed by anyone else connected to the Internet. It is relatively easy
to learn, with the basics being accessible to most people in one sitting; and
quite powerful in what it allows you to create. It is constantly undergoing revision
and evolution to meet the demands and requirements of the growing Internet
audience under the direction of the W3C, the organization charged with designing
and maintaining the language.
How does it work?
HTML consists of a series of short codes typed into a text-file by the site author —
these are the tags. The text is then saved as a html file, and viewed through
a browser. This browser reads the file and translates the text into a visible form,
hopefully rendering the page as the author had intended. Writing your own HTML
entails using tags correctly to create your vision. You can use anything from a
rudimentary text-editor to a powerful graphical editor to create HTML pages.
Examples:
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
Example of HTML structure
Short video explaining HTML
Dreamweaver
Adobe Dreamweaver is an app that is often used by website creators to generate websites for
usage through several boards. Including browsers, devices, and tablets. It is a software program
for designing web pages, fundamentally an abundantly featured HTML web and programming
editor. The program offers a “what-you-see-is-what-you-get” interface for customers to produce
and change web pages in a friendly manner and environment. Dreamweaver supports numerous
web and programming languages including HTML, C#, Visual Basic (VB), Cascading Style Sheets
(CSS), Active Server Pages (ASP), Extensible Markup Language (XML) and others. The program is
also available in several languages, including English, Spanish, French, German, Japanese,
Chinese (both Simplified and Traditional), Italian, Russian, and more. Web designers use
Dreamweaver for creating website samples using web-friendly artwork. Visually alteration
semantic web foundations using CSS inspectors and implements. Creating standards-based
websites and applications that simply flow across various screens. Web developers use
Dreamweaver for inscription with a structured code format using the dominant IDE. Assembling
flexible mobile apps. Effortlessly employed with composite content organization systems, such
as Wordpress and Drupal. And emerging mobile-apps using web-based facilities. In short,
Dreamweaver gives web-creators the freedom and capability to design and alter websites and
mobile-apps in a user responsive atmosphere.
Example of Dreamweaver structure
Pros
It highlights your coding so that it can be quickly scanned. Rather than looking for where your code is
located, you can quickly see what is where thanks to the highlight
It helps beginners understand what the coding does for a website. The color coding also highlights what
the specific commands can do for a template or page. This makes the learning process a lot easier.
Users receive code suggestions. This is useful for beginners who do not fully understand codes and what
they do.
You don’t have to switch screens, there is an option for fully coding, fully live, and a split screen so you
have the freedom of choosing which interface you are most comfortable with and you don’t have to keep
switching between screens.
Coding is immediately double checked. Normally, when using traditional coding (eg:- notepad), it is
nearly impossible to notice a type or mistake within the coding, which makes it extremely difficult to fix
any problems. In Dreamweaver, the code is double check to see if it is in the right format.
Editing text and images are much easier in Dreamweaver. When coding, if you want a text to be bold,
you would manually have to code it and make it that it is bold. In Dreamweaver, you can highlight the
text and instantly make it bold. This applies with other things such as font, color, sizes, etc.
Find and replace is a great option that is available in Dreamweaver. It allows the user to find a specific
part of their coding and change it.
Users can tab through different files as if it was an internet browser. When having multiple pages in a
website, it is necessary to create a different file for each page.
There are templates you can choose from, which can be the foundation of the website. There are
several different styles you can pick from and work on it from there. This is a great opinion for
newcomers in coding.
Cons
Although your coding might look good on dream weaver, the outcome may have differences to what you
expected. This occurs frequently due to it irresponsiveness to meet cross-platform needs.
It can be intimidating to work with at first as a beginner, since there are so many options to work from. It
will take time to learn the interface thoroughly and can consistently manipulate it.
It has some features that people find that they never use – it over complicates the interface and is
useless.
Although Dreamweaver promotes a what-you-see-is-what-you-get attitude, it is not always the case,
especially when relying on the design view. It changes the absolute positioning of some of the items and
images which may be disappointing.
Adobe Dreamweaver was designed to meet the most needs it possibly could for users far and wide.
Because of this, you’ll find that many code snippets tend to be very lengthy. The validation of just one
field, for example, may take up 15 lines of code. Although some find this viable, it can be irritating.
When you’re done with a line you’re typing, you hit “enter” on your keyboard, right? That natural habit in
the design view will add a lot of unnecessary paragraph codes into your design. This doesn’t necessarily
affect the site much, but it does make the coding a bit difficult to read.
If you do not understand coding, and use the design view of the interface, you will get annoyed because
of how limited the design view is.
If users aren’t careful, this program can take over many of the coding responsibilities someone may have.
This limits the creativity that can occur within the design. It also means users won’t be able to code on
their own if they don’t have access to Dreamweaver for some reason.
Global styling can become a major headache.
If users happen to use the properties bar on their text within older versions of Adobe Dreamweaver, then
it will almost always add an undefined document style to the coding.
Microsoft Frontpage
Microsoft FrontPage provides Web designers and developers of all skill levels
the ability to create intranet and Internet sites with relative ease. But
FrontPage is much more than what ships in the box; it is an extensible
program that allows advanced users and developers to extend functionality to
create custom Web authoring solutions ranging from custom themes and
wizards to Add-ins created using Microsoft Visual Basic or Microsoft Visual C++.
Find in-depth content, code walkthroughs, downloads, product information,
and more at this one-stop resource for FrontPage developers. Microsoft
FrontPage was commercially available in four versions: FrontPage 98,
FrontPage 2000, FrontPage 2002 & FrontPage 2003. FrontPage is a WYSIWYG,
"What You See Is What You Get", Web Editor. All versions of FrontPage are still
in use by web developers all over the globe. The 2003 version is the last
installment to the series. It was replaced by Microsoft Expression Web and
Microsoft Office SharePoint Designer. The first version of the app was made by
Vermeer Technologies, before its acquisition by Microsoft.
Example of MS Frontpage structure
Pros
Very low-cost -- free on-campus and only $5 for off-campus use via Campus
Microsoft Agreement
Available in labs across campuses
Supported by SOE Technical Support Services
Easy to learn because of the familiar Microsoft menus and toolbars
Comes equipped with many pre-designed web page templates
Very easy to edit on SOE servers
Easy to add some features, such as some forms, to web pages
Cons
Doesn't produce code as cleanly as Dreamweaver
Current edition is available for Windows only; Macintosh version is outdated
and no longer being updated
Some features are specific to the Microsoft platform only
Lacks interactive development tools found in other platforms such
as WordPress or Dreamweaver
Bibliography
Shannon, Ross. "HTML Source : HTML Tutorials." What Is HTML? | HyperText Markup
Language Explained. N.p., 21 Aug. 2012. Web. 20 Nov. 2016.
http://www.yourhtmlsource.com/starthere/whatishtml.html
Duncan, [email protected] Robert. "What Is HTML?" What Is HTML - A Simple Guide
to HTML. N.p., n.d. Web. 20 Nov. 2016.
<http://www.simplehtmlguide.com/whatishtml.php>.
Jameswillweb. "What Is Dreamweaver?" Lynda.com - from LinkedIn. N.p., 17 June 2013.
Web. 15 Nov. 2016. <https://www.lynda.com/Dreamweaver-tutorials/WhatDreamweaver-Video/124084/138659-4.html>.
"16 Adobe Dreamweaver Pros and Cons - BrandonGaille.com." BrandonGaille.com. N.p., 19
Jan. 2016. Web. 15 Nov. 2016. <http://brandongaille.com/16-adobe-dreamweaver-prosand-cons/>.
Kalif, Will. "Design your own webpages with the free Frontpage Express software".
stormthecastle.com.
Wikipedia Contributors. "Microsoft Frontpage." Wikipedia. N.p., 5 Feb. 2015. Web. 20
Sept. 2016. <https://simple.wikipedia.org/wiki/Microsoft_FrontPage>.