Download presentation
Presentation is loading. Please wait.
1
HTML vs FrontPage & Dreamweaver
Ali Al Bastaki
2
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
3
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.
4
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
5
Example of HTML structure
6
Short video explaining HTML
7
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.
8
Example of Dreamweaver structure
9
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.
10
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.
11
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 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.
12
Example of MS Frontpage structure
13
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
14
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
15
Bibliography Shannon, Ross. "HTML Source : HTML Tutorials." What Is HTML? | HyperText Markup Language Explained. N.p., 21 Aug Web. 20 Nov Duncan, Robert. "What Is HTML?" What Is HTML - A Simple Guide to HTML. N.p., n.d. Web. 20 Nov < Jameswillweb. "What Is Dreamweaver?" Lynda.com - from LinkedIn. N.p., 17 June Web. 15 Nov < Dreamweaver-Video/124084/ html>. "16 Adobe Dreamweaver Pros and Cons - BrandonGaille.com." BrandonGaille.com. N.p., 19 Jan Web. 15 Nov < and-cons/>. Kalif, Will. "Design your own webpages with the free Frontpage Express software". stormthecastle.com. Wikipedia Contributors. "Microsoft Frontpage." Wikipedia. N.p., 5 Feb Web. 20 Sept <
Similar presentations
