A really simple HTML5 web page:

1. Make a folder (directory) on your desktop or in your Sites folder. Name it whatever you wish to call your website. THE FOLDER IS THE WEBSITE!

2. Open TextEdit (mac) or Notebook (pc).

3. Write the following text:

<!DOCTYPE html>
<html>
<head>
<title>
A Simple Page</title>
</head>
<body>

This is my simple web page


</body>


</html>

3. Change format of file to text (.txt) and save in your website folder as index.txt.

4. Make index.txt into an executable by changing its suffix to .html, thus: index.html.

You may place other .html, .gif or .jpg files that you wish to have on your website in this directory. Eventually ALL files on your website will be in this directory.

If you are interested, serious HTML learning occurs here: http://www.w3schools.com/html/default.asp

Really simple Dreamweaver:

1. Open Dreamweaver from the "Applications" folder (and get used to using the term "directory" instead of "folder")

2. Choose "Standard" workspace

3. Start with an existing folder

4. Select your website folder (generally, on the desktop in the computer room, in the "Sites" folder at home)

5.

6. Open the "index.html" file

7. Open the "Properties" panel

9. The "Properties" panel gives information on whatever is happening to any item on your page

10. Choose from top menu, Insert > div. A div is the basic HTML element. The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections.
Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.

11. Give a name to your <div>. Any name will do. Developers usually call them div01, div02, div03 etc. Click on New CSS rule. (CSS, or cascading style sheets are a means to format your html elements)

12. Choose, "Class can apply to any HTML element". Save in "This document only". This will write your CSS file right into the HTML document. CSS can be kept on a separate page as well, or on a remote site

13. The CSS box allows you to choose almost anything for formatting. CSS has developed into a sophisticated computer language in itself

14. In "Positioning", choose "Absolute". This will give you a moveable <div> into which you can put anything: text, pictures, scripts (mini-programs), audio, video

15.

 

16. You can see your page in "Code" (which shows text) or "Design" (what you see is what you get, WYSWYG) or both, "Split".

Finding the root folder (directory)

1. The most important aspect in Dreamweaver is identifying your root folder:
Click on "Site--New Site". Select your website folder (web root). It can be anywhere, for example: /Home/Desktop but usually it is in your /Home/Sites directory

2. Identify the proper folder (On the desktop)

3. As you see, I have added other files into the Unamed Site 2 website.

Making a new page

1. Now you can make new webpages from within Dreamweaver. Save them all to the same directory. Save each subsequent page with a different name. No spaces or punctuation!

Your first HTML element. Begin by inserting a div.The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.

Switch Dreamweaver to Code view. The code is being written by Dreamweaver but it can be edited.

CSS styles are written in the <stlyle> tag. #first_thing is the name you gave to your div. Here are some attributes but there are many: https://www.w3schools.com/tags/tag_div.asp

 

When you go back to design view it looks like this:

 

Next: CSS stuff | Back to home