Dreamweaver Web Design Tutorial Chapter 1 - How to Build a Simple Web Page
Hyper Text Markup Language (HTML) is the foundation code of any web page. The code is comprised of a simple tag-based markup language for the World Wide Web that communicates information about how the text, graphics, links, and other content formatting, as well as the page structure of a document, should be viewed in a web browser. Almost anyone can learn HTML in a short period of time because its rules are reasonably straightforward, it isn’t a full-scale programming language, and its structure is fairly uncomplicated.
The HTML code for any web page can either be typed using a code editors or visual editors:
Code editors: These kinds of HTML editors are perfect for people who already know some HTML and prefer to hand-code their HTML pages. Code editors can be as simple as the text-editing program that comes with your computer such as Notepad on a PC or TextEdit on a Mac. Do not use a word processing application like WordPad or Microsoft Word as a code editor. These programs tend to add extra characters and unnecessary markup to the HTML code that can drastically increase the file size of the saved .html document.
Visual editors: Also sometimes called design, drag and drop, and web editors, these types of HTML editors, like Adobe Dreamweaver allow designers to build pages by using a friendly WYSIWYG user interface. (WYSIWYG, pronounced “wizzy-wig,” stands for What You See Is What You Get) Visual editors provide you with easy-to-use buttons, tools, special shortcuts, and drag-and-drop features that allow you to easily add text, graphics, and other content to a web page. This means that you don’t need to know much HTML to use an editor like this (though the more you know, the faster you can code and edit, and the better designer you’ll ultimately be). Besides their user-friendly interfaces, visual editors have working offline design views, or rendering engines, that closely mirror what the page will look like when displayed in a browser window (either with or without a live Internet connection), making the web page–building process much more fun and easy to do.
Another great benefit to using a visual editor over a code editor is that most visual editors have built-in coding editors, so users can easily switch back and forth between the code and visual editing modes, or in the case of Adobe Dreamweaver, work in both modes simultaneously using a Split Code display that shows both the code and the design views of a page. This noob-friendly tutorial series uses Dreamweaver and hand-coding methods exclusively as the basis for providing instructional steps in later chapters on how to build your web pages.
All HTML code uses small components called tags to mark up your text, graphics, and other content on a page that is viewed in a web browser. Tags are essentially predefined words or acronyms written in all lowercase letters and surrounded by left (<) and right (>) angle brackets, as in the tag <html>. Understanding a few fundamentals about HTML tags can help you understand much of the HTML code that you’ll see as you begin creating web pages.
Most HTML tags come in tag sets, or pairs, to mark the start and end of a text block or other object, such as an image, table, or layer, that appears on a web page. Think of each tag pair as a kind of container that can hold certain kinds of content as well as inform a browser how to format and display that content. Closing tags look identical to the opening tags with the exception of having an added forward slash directly before the tag name after the opening bracket. For example, a sentence might be marked up with opening and closing paragraph, or <p>, tags like this:
<p>HTML tags make your documents viewable on the Internet.</p>
Building a simple web page is easy, every web page uses a similar fundamental structure. All tags are hierarchically nested between opening and closing <html> tags, and all the code in the page falls between either the <head> or the <body> tags.
Follow these steps to see how easy HTML is to understand and use:
1. Open a new document in your computer text-editing program. (no need for Dreamweaver yet)
On a PC, choose Start>All Programs>Accessories>Notepad.
On a Mac, launch your Applications folder and double-click the TextEdit icon.
A new, untitled document should open automatically. If that doesn’t happen, choose File>New to open a new file.
2. Type the following HTML tags into the document window:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3. Between the opening and closing <title> tags, type My Very First Web Page.
Your code should now look like this:
<html>
<head>
<title>My Very First Web Page</title>
</head>
<body>
</body>
</html>
4. Between the opening and closing <body> tags, type Hello world.
Now your code should look like this:
<html>
<head>
<title>My Very First Web Page</title>
</head>
<body>Hello world.
</body>
</html>
5. Choose File>Save to open the Save As dialog box.
If you’re using simpleText, choose Make Plain Text from the Format menu before saving the file as .html.
6. Set the Save In location to your computer desktop.
7. In the File Name field, type index.html.
8. In the Save as Type field, select All Files.
9. Click the Save button to save the file with the settings you just entered and close the file.
10. Launch your favorite browser and resize the browser window to roughly half the size of your desktop.
11. Drag and drop the icon of your new index.html page into the open browser window.
Your new web page appears with the words “Hello world.” in the body of the page, and the title, My Very First Web Page, appears in the browser’s title bar.
Congratulations! You’ve just created your first web page. Of course, you already know that you can do a lot more to a page than include text, which you find out how to do in future chapters. For now, feel free to experiment by adding more text between the body tags or changing the title.
[post_ads]
Such a great article it is. I really enjoyed it. It will help me to enhance my knowledge about web designing. Houston web Design Company
ReplyDeletethanks sir XD
Delete