Creating HTML authored webpages using a text editor
|
|
|
- Mary Norman
- 8 years ago
- Views:
Transcription
1 GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage (cmp.html) 4. Create a contact webpage (contact_me.html) 5. Add additional examples of popular html tags 6. Upload pages to your web host 7. View and test uploaded web pages 8. Send an with your website URL to the Instructor Assignment overview: This week we will be introduced to creating a basic webpage using HTML. We will create two webpages using a plain text editor called Text Edit on the Mac or Notepad on a PC. We will author our webpage s using basic HTML tags and save our documents with the.html file extension. Using HTML tags we can create a web page document that displays within a web browser and is publishable onto the World Wide Web. We will need to open a hosting account in order to publish our pages onto the web. Finally, we will use an FTP program to put or upload our files to our web hosting account. In order to complete this Assignment you will need access to a plain text editor, a web browser, an FTP program, and have Internet access. You are not allowed to use a web editing program like Dreamweaver for this assignment. 1
2 HTML Primer/Intro What is HTML? HTML stands for HyperText Markup Language. A webpage is simply a plain text document, authored using html tags and saved with the.html file extension. Using HTML tags we can author our own web page using a plain text editor and then save it with the.html file extension. Text and images can be displayed within a webpage with desired formatting. The webpage is viewable within a web browser and publishable onto the World Wide Web. HTML tags can be used to mark up how we want the text inside the webpage to look. Every time we want to display text a certain way inside the webpage we use a pair of tags, containing an opening and a closing tag. HTML tag example <strong>text to be bolded goes inside the strong tags</strong> HTML requires you to use tags in order to format text or content. Most, but not all HTML tags, come in pairs, an opening and closing tag. Every time you want a webpage to have a certain appearance or format you will need to use the corresponding HTML tag. Hyperlinks or links enable you to link a webpage to other webpage s published on the WWW or World Wide Web. Every webpage is required to have a minimum set of HTML tags, shown on the next page. HTML tags should be typed in lower case for current versions of HTML. The latest version of HTML is now known as HTML5. All of your page s main content will go inside the <body></body> tags shown on the next page. 2
3 Min required HTML tags for a basic webpage <html> <head> <title> </title> </head> <body> </body> </html> Notice in the above example all the required tags come in pairs. A tag is closed with a second closing tag containing a /. Most content for a webpage goes in between the two body tags as shown below. Please note there can only be one set of body tags. <body> content will go here </body> It may be easier to look at the required HTML tags in sections. The head contains info about the webpage including a set of title tags. The body contains the main content that you are used to seeing in the web browser. The extra spacing shown below is used to make the tags more readable, the web browser would ignore the extra spacing when it in renders the HTML code within the web browser. <html> <head> </head> <title> My title goes inside the title tags and shows in the browsers header </title> <body> Main content goes inside the body tags displays in the main webpage </body> </html> 3
4 An example webpage and its html code are shown below with the required html tags and some additional tags. Most content and popular tags go inside the <body></body>. <html> <head> <title> My first webpage. The title shows up in the very top header of the web browser. </title> </head> <body> Hi welcome to my first webpage. Any content I want to display within the page goes here. Any formatting or styling will require a HTML tag. For example, <strong> this text will be bold.</strong>the bold text has the strong tag around it so it will be bolded. Here I will be adding a line break. <br> This sentence will begin on a new line. Next I will add a picture using the img tag. <img src="boy.jpg"> </body> </html> Important note: Remember HTML tags can be typed inside a plain text editor and then saved as a webpage document with the.html file extension. The resulting file like sampler.html will be viewable through a web browser like Internet Explorer and is then publishable onto the World Wide Web by uploading (using FTP or File Transfer Protocol) to a web host account. 4
5 The most commonly used HTML tags (these tags must go inside the body) Paragraph tag, adds 1 line of spacing before and after the paragraph <p>paragraph content goes here. You can have many words and/or sentences.</p> Bold text <strong>bold text goes here</strong> Italicized text <em>italicized text goes here</em> Hyperlink, links to another webpage or file, URL is the link or file it will take you to <a href="url goes here">type a name for the link</a> Example: <a href=" link to Cnn s Website</a> <a href=" link to a pdf file</a> Image <img src="image filename location goes here"> Example: <img src=" /> Line Break, inserts a line break or carriage return to next line <br> Table, provides a structure for holding data. A represents a table row and a <td> represents a table cell inside the row <table> <td>content goes here, this is a cell</td> <td>content goes here too, this is another cell</td> </table> (continued on next page ) 5
6 Headline text, size 1-6 possible, size 1 largest <h1>heading 1 text goes here</h1> Unordered list (bulleted list) <ul> <li>1st list item text goes here</li> <li>2nd list item text goes here</li> <li>3rd list item text goes here</li> </ul> Ordered list (ordered numbered list) <ul> <li>1st list item text goes here</li> <li>2nd list item text goes here</li> <li>3rd list item text goes here</li> </ul> mailto: hyperlink, links to a address (not fully supported by browsers) <a href="mailto:john.doe@csn.edu">john.doe@csn.edu</a> Align="center" centers the paragraph <p align="center">paragraph text goes here</p> 6
7 Here s an example webpage important note. Notice how most tags go inside the body tags. <html> <head> <title>adam's Homepage</title> </head> <body> <p> Welcome to my first webpage.<br> Here's a cool image of Bill Gates and Slash: <br> <img src= <br> Checkout my favorite news site: <a href=" HDTV seems to be the biggest electronics buzz this year </p> <table> <td>analog TV</td> <td>hdtv</td> <td>currently Predominant</td> <td>future of TV req'd by June 2009</td> <td>affordable, most people already own a analog tv</td> <td>expensive, most people own only one or none at all</td> </table> </body> </html> Any extra spacing, as shown above, added to the code will be ignored. For example, the first paragraph with its extra line spacing is actually only 1 paragraph, the extra spacing is ignored. Any time you want extra line spacing you have to use an HTML tag like <p> </p> or <br > to create actual spacing. Note: If you wanted to see what this page would look like you could copy the code and paste into a plain text editor and then save as example.html and then you would be able to view page using a web browser by double clicking on the file wherever it was saved. 7
8 Plain text editor overview: For this assignment we will use a plain text editor like Text Edit (Mac) or Notepad (Pc), no visual editor like Dreamweaver allowed. Remember to save your files into a GRC 175 folder For this Assignment we must save our webpages to the root of the grc 175 folder, meaning do not put into any additional folder inside the 175 folder. This means do not create an A1 folder within your 175 folder. Once I save my document I can attempt to view in a web browser by double clicking on the file wherever the file was saved, the default program, a web browser like Internet Explorer or Safari will open the file. Also, once I have a web page open in a browser I can view its HTML code by viewing the source, View>Source in IE, View>View Source in Safari Pc users using Notepad When using Notepad on a pc you are automatically editing in plain text, when using Text Edit you will need to first set the preferences see below. On a PC Notepad can be found start>run>notepad. Notepad automatically creates a plain text document there are no preferences which need to be set. 8
9 Mac users using Text Edit see requirements below In the Mac labs there may should a shortcut to Text Edit on the dock, if not Text Edit can be found under the Applications folder ü When using Text Edit on a Mac you must set the preferences so that you edit in plain text only without any type of formatting. ü Within Text Edit click on Text Edit >Preferences (located at top menu) ü Under the New Document tab select the plain text option for new documents ü Click on the Open and Save tab and select the ignore rich text commands in html option ü Once you set the preferences close that window and you will need to open a new document, File>New. There should be no formatting toolbar showing at the top of the new document. ü When you save your webpage within Text Edit you need to add the.html file extension, save the first page as index.html ü When saving as.html Text Edit will prompt you to verify you want to save as.html, make sure to save.html and not.txt 9
10 Step 1 Acquire Web hosting space Open a free web hosting account through an external hosting provider. You will need a web host account in order to complete the coursework for this class. There are many free hosting accounts available, make sure they do not contain advertising. Host should provide at least 250mb space for your files. Signup and activate a free web hosting account. For example find a free web hosting company and activate an account (pick any host company but do not pay for anything, it should be entirely free) Make sure to not register a domain name since this costs money many hosts will have you pick a unique and free sub domain like adamssite.webhost.com ü Recommended free web hosting account companies: Please note these recommendations change every semester. If you have any problems with a free host open a new account with another host Once you create a web host account write down your ftp/hostname info: Hostname/ftp address Username/login name Password Website URL Here is an example (yours info will be different, every host uses different values) Hostname/ftp address ftp.freehostia.com Username/login name avalentiner Password ########## Website URL 10
11 Step 2 Create an index webpage (index.html) Most webhosts require you to have an index.html page stored within your web host directory. The index page is the default page to show under your host directory. We will start out by creating an index page using a plain text editor and authored using the basic required HTML tags. On a pc you can use a program called Notepad, Start>Run>Notepad On the Mac we will use a program called Text Edit, found under our Applications folder. ü Mac users will have to set the preferences for Text Edit, see below Within Text Edit click on Text Edit >Preferences (located at top menu) Under the New Document tab select the plain text option for new documents Click on the Open and Save tab and select the ignore rich text commands in html option Close preferences window, red button at top Open a new document, a plain text document should open Plain text means there is no formatting bar at the top of the editor. Once you set the preferences you will need to open a new document. Please note tags in HTML are now case sensitive; always use lowercase. Copy and paste the following required HTML tags into the text editor. <html> <head> <title> First Name Last Name index page </title> </head> <body> </body> </html> Next we will want to save this file into a course folder. 11
12 You will need to create a folder in order to save all your coursework during the semester. Save somewhere you can easily find like your desktop or your jumpdrive. Create a folder on your desktop called GRC 175 Save file as index.html, save file within your GRC175 folder. The index page is the default page that will show under your directory or web space. Our page will be very simple. Type your name within the opening and closing title tags. Next we want to add a hyperlink. A hyperlink provides text which is clickable and takes the viewer to a specified webpage when clicked on. The hyperlink tag, shown below, must go somewhere inside the body tags. Copy and paste the following into your body. <a href="cmp.html"> Course management Link</a> The hyperlink tag we have added creates a hyperlink to another webpage named cmp.html. We will be creating this second page in one of the next steps. An example of my entire code is shown below. <html> <head> <title> First Name Last Name index page </title> </head> <body> <a href="cmp.html"> Course management Link</a> </body> </html> You can put whatever you want on your index page. Make sure to at least put some content and a unique title. Save file. Make sure you have saved file as index.html and saved file within a GRC175 course folder. 12
13 Once saved go and find the file and then double+click on the file to preview within a web browser. Note how the HTML title shows in the top header of a web browser. Step 3 Create the project management page (cmp.html) Next, we will create another web page also using the plain text editor and the basic HTML tags. First, create a new document File>New and then type or copy and paste the following basic required HTML tags within textedit or notepad. <html> <head> <title> a title can go here </title> </head> <body> main content of your webpage will go here </body> </html> Add a unique title, add two paragraph tags as shown below, and then replace with your own unique info. Paragraph tag <p></p>, adds spacing around any content inside each paragraph <p></p> (Do not type another set of the basic required tags into textedit simply add the content highlighted below, your entire should look similar to the following) 13
14 <html> <head> <title> first name last name grc 175 project management page </title> </head> <body> <p> project management page grc 175 </p> <p> first name last name </p> </body> </html> Replace the example data with your own info Save file as cmp.html, save file within your GRC 175 folder. Find file and double click on file in order to preview in a web browser. As you make changes you can save your file in the text editor (cntrl+s / cmnd+s) and then preview the page in a web browser, if you keep the web browser open you simply need to refresh the browser every time changes are made and saved. Return to the text editor, add a table to your page. Type table tags after the last </p> tag and before the closing </body> A table is made up of an opening and closing table tag, and a table has rows inside the table, and table cells must go inside these rows. <table> <td> Hello world this is my first table </td> </table> Tables help provide structure for displaying content. For example you can place content within a table to help provide a structure for displaying data on a webpage. You will see what we mean in just a second. A table tag creates a box. A table must have a table row and a table cell. 14
15 represents a table row <td></td> represents a table cell within a row The table cell must go inside the table row. Note: alternatively we could add a table header tag instead of a td (cell) tag. <th></th> this tag must also go within any table row, this tag is optional and would be used instead of the table cell tag <td></td> A table header will bold any content inside this tag. <table> <th> table cell data can go here, it will be bolded </th> </table> Note: Tables can even be put inside other tables, this is known as nesting tables. You DO NOT have to create an example of this. The nested table needs to go inside a table cell. See the example below. Extra spacing is ignored by browser. <table> <td> this is the first table, row 1 cell 1 </td> <td> <table> <td> second table is nested inside the first table, row 1 cell 2 </td> </table> </td> </table> Your code for the cmp.html should now look similar to the example on the next page: 15
16 <html> <head> <title> first name last name grc 175 project management page </title> </head> <body> <p> project management page grc 175 </p> <p> first name last name </p> <table> <td> Hello world this is my first table </td> </table> </body> </html> Save and preview within a browser When our table is viewed through a web browser there is not much to see since the table has little content and the default (border) setting makes it transparent. We will modify our table and make it more visible next. Add a border to your opening table tag table to make the table more visible, adds a border around the table, add the following inside the opening table tag <table border= "1" > Add an additional column <td></td> must add inside the table row see below <table border= "1" > <td> Row 1 column 1 </td> <td> Row 1 column 2 </td> </table> 16
17 Add about 3 additional table rows Remember each row has 2 columns, each <td></td> represents a column or cell <td> Row 1 column 1 </td> <td> Row 1 column 2 </td> Next, add some more content in order to make table more visible. For example try adding the word Assignments to the first row first cell. Then try adding the word Bookwork to the first row and second cell. See the example on the next page for help. You table code should look similar to the following If necessary highlight and copy the table code and then paste replacing your existing table code. <table border= "1" > <td>assignments</td> <td>bookwork</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </table> 17
18 Save and preview page in a web browser. There is one problem, our table is not completely visible and most of our rows will look collapsed since there is no data inside them, we can fix this by adding a non breaking space. Add a non breaking space (blank space) to at least one cell in each row of the table that has no content, this will make our table expand fully. The html tag for a non breaking space is The example below represents only one row inside our table <td> </td> <td> </td> Make sure you have added a non breaking space (blank space) to each of the empty cells You will need to add to at least one cell in each row of the table that has no content. Save and preview page in a web browser. Notice how the table is more visible now Next, we want to add additional table attributes to your table. All the following table attributes within the opening table tag, see example on next page for help. align="center" width="300" cellpadding="10" bgcolor="silver"> Aligns content in table to be centered Defines a width for your table Adds padding in between cells Adds a background color of silver to your table Note: We will learn in the next assignment how to use stylesheets to style our webpages. Stylesheets are the preferred method for formatting a table vs using HTML. We are using the old HTML method in the above example. 18
19 This is what the opening table tag will need to look like. You can modify size and color to your liking. <table border="1" align="center" width="300" cellpadding="10" bgcolor="silver"> Note: When using/defining color you can use either the approx. sixteen predefined colors or the hexadecimal value. Sixteen predefined colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Please make sure that you only have one opening table <table> tag!!! Save and preview page in a web browser. Next, add several examples of centered, bold, and italicized text to some text on this webpage. Aligns paragraph text to be centered, add inside any opening paragraph tag. <p align="center">centered paragraph text goes here</p> Bold text <strong>bold text goes here</strong> Italicized text <em>italicized text goes here</em> Note: Do not use <b> or <i> tags, these are not recommended. Use what is shown above, <em> and <strong> On the second row of your table add a hyperlink. Href hyperlink <a href="webpage URL">This is the text for my hyperlink</a> Modify hyperlink to go to contact_me.html which we will create in the next step. 19
20 Modify hyperlink to look like this: <a href="contact_me.html">a1 Contact Page</a> Save and preview page in a web browser. Note: If you tried to click on the hyperlink it would be unable to open that page since we haven t created yet, we will create soon. See the example below to get an idea what you page should look similar to. The code I used to create my page is shown on the next page. Adding various tags will change the appearance of the page, your page will not have this exact code. 20
21 <html> <head> <title>adam Valentiner GRC 175 Project management page</title> </head> <body> <p align="center"><strong>project management page GRC 175</strong></p> <p align="center"><strong>adam Valentiner </strong></p> <table align="center" width="300" border="1" cellpadding="10" bgcolor="silver"> <td><em><strong> Assignments </strong></em></td> <td><em><strong> Book work </strong></em></td> <td><a href="contact_me.html">a1 Contact Page</a></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </table> </body> </html> Step 4 Create the contact page (contact_me.html) For the contact page we will be adding some images, several paragraphs, providing contact info, and more. Create a new plain text document. 21
22 Required tags, copy and paste the following code into notepad. <html> <head> <title> first name last name page description </title> </head> <body> </body> </html> Modify title to your own info. Each web page is required to have a unique title. Next, add a paragraph <p></p> inside the body. The paragraph also provides spacing and a line break around the paragraph. <html> <head> <title> My name goes here Contact page </title> </head> <body> <p></p> </body> </html> Inside the paragraph type three sentences about your hobbies or interests. Next we want to add two images using the img tag. These two image examples will demonstrate the two common ways of linking to an image, relative path and absolute path Add the following inside the current paragraph or create a new paragraph. img <img src="filename"> In order to point to an image replace filename with the local filename of your image (image must be in the same location/folder as your web page) or provide the URL of the image you are linking to (you can link to an image on the web 22
23 using its URL). Image should end with the.gif,.jpg, or.png file extension. Image file paths are either relative or absolute paths. Absolute filename example: <img src=" Relative filename example: <img src="island.jpg"> You must demonstrate both of the file location types, absolute and relative for your two image examples. Go to in order to find some images. You will need to get the URL for one image in order to have an absolute image and then download a different one. You must use your own URL do not use the example. You will need to copy the address or URL for the absolute example Once you download the image make sure to put inside the website folder where you are saving your files Save and preview in a web browser Next add a border to each of these images: <img src="imagename.jpg" border= "1"> Save and preview in a web browser Optional: resize one of the images using html. Note this may distort the image, unless you maintain the images original aspect ratio. Add a width and height value in pixels or % goes inside the img tag. Note: Only some browsers support % width="200" height="200" or use % width="25%" height="25%" 23
24 Resized image <img src="imagename.jpg" width="200" height="200" border= "1"> Extra credit, add another image and add a hyperlink around the image. Hyperlinked image <a href=" src="images/dogs></a> Next, we will add a background image to the entire webpage. This will add a tiled background image to your webpage. You will need to find an image to use for your background. Find your own image and URL. Add a background property to our opening body tag. Add to your existing opening body tag. Do not add a second opening body tag. Go to in order to find a bg image. You will need to get the absolute URL. The following are two ways of adding a background image to our page within the existing body tag. Add the following code inside your existing body tag style="background-image: url('url goes here');" The is what it should look similar to but you will need to find your own URL The following is known as a CSS inline style and it is the desired method <body style="background-image: url(' > The old HTML method is not recommended <body background=" 24
25 Important note: We will learn in the next assignment more about how to use CSS stylesheets to style our webpages. Stylesheets are the preferred method for adding a background to a webpage vs using HTML. Save and preview page in a web browser Your new page should look similar to the following on the next page: <html> <head> <title> Adam Valentiner HTML aaa page </title> </head> <body background=" <p>this is the first and my most favorite computer generated beach image I found on the web. <img src= border= "1">The Island of kauai was my favorite island to visit in Hawaii. Checkout my favorite scenic spot I found. <img src="island.jpg" border= "1"> <p/> </body> </html> Somewhere inside the paragraph add an example of a line break, <br> The <br> tags adds a line break directly after the tag, making the text that follows the tag begin on a new line. If you add the line break right before the image it will put the image on a new line. br (line break) <br> br example: <p>this is the first and my most favorite computer generated beach image I found on the web. <br><img src= border= "1"></p> Note: The difference between a <p></p> tag and <br> is that a <p> paragraph tag will put a blank line after the paragraph is closed. A <br> is used where you want 25
26 a simple line break or carriage return, and there will be no extra line spacing. Also notice a <p> tag has an opening and closing tag but a <br> only has one tag, you put the line break tag where you want line break to occur. Save and preview page in a web browser Step 5 Add additional examples of popular html tags Next, somewhere on this page add several examples of centering, bold, and italicized text. For centering do not use <center> the tag is deprecated. For bold and italic do not use <b> or <i> tags, these are deprecated too. Deprecated means do not use any more since they are unsupported and old tags. Use the following tags to center, bold, and italicise Centering text or content inside a paragraph, add to opening tag align="center" Align center example (can use with table also) <p align="center">centered paragraph text goes here</p> Bold text <strong>bold text goes here</strong> Italicized text <em>italicized text goes here</em> Note: HTML tags can be nested inside other tags as long as they are opened and closed in the correct order/sequence. For example: <em><strong>project</strong></em> Save and preview page in a web browser. Next, add a horizontal rule somewhere on your page but not inside a paragraph since it is a stand alone element or a block element. Creates a horizontal line. 26
27 hr horizontal rule <hr> Add a Headline example somewhere on your page. Make sure to also put outside any paragraphs since it is a block element. Headline tag comes in sizes 1-6, 1 being the largest. Creates a headline with larger text. h1 headline tag <h1>heading 1 text goes here</h1> Somewhere on the page, but not inside a paragraph, add an ordered list with at least three list items of your three favorite things to do <ol> <li>1 st list item text goes here</li> <li>2 nd list item text goes here</li> <li>3 rd list item text goes here</li> </ol> Save and preview page in a web browser Somewhere on the page, add a hyperlink to your favorite website using the HREF tag. Should go inside one of your paragraphs or other block element. <a href="url">name for my hyperlink goes here</a> At the very bottom of your page add a mailto: hyperlink. Provides a link to an . Should go inside one of your paragraph or other block elements. <a href="mailto: goeshere@ name.com">text for link</a> Note: The mailto: hyperlink only works as intended, opening up a new with this address if the viewer has an program like Outlook installed. It doesn t work as intended, for most people who use web based . Save and preview page in a web browser 27
28 Add any additional content as desired. Make sure you have met the minimum requirements. Extra credit, add a table with at least 2 rows and 2 columns somewhere on this page. Cannot go inside a paragraph tag though. We will upload our two pages to our web host account next. Step 6 Upload pages to your web host Next we need to upload your 2 pages and A1 to your web host account Popular Web Hosting Terminology: FTP File Transfer Protocol, an Internet standard for transferring files over the Internet. Web hosting - Web site hosting. Provides the housing, serving, and maintaining files for one or more web sites on a remote web server. Host/Hostname/FTP Host is the address of the web server we will be connecting to where we will upload our web pages/website. Host is sometimes referred to as the FTP address. Host can be a ftp address like ftp.nevada.edu or an IP address such as An ftp or host address cannot begin with ftp:// Username Your unique user account Password Password for your user account A Domain name - name that locates an organization or other entity on the Internet. For example, the domain name. i.e.: photosbyjoe.com Make sure you have opened a web hosting account, we did this in step 1 of this assignment Verify you have the written down following before continuing: ü Hostname/Host/FTP ü Username ü Password 28
29 For this next step you are going to need access to an ftp program If necessary, download Filezilla Free FTP if your computer doesn t have an FTP program. Computers do not come with ftp programs. Filezilla download URL The CSN Mac lab computers should have Fetch FTP Open Filezilla or Fetch (mac) or similar FTP program The FTP program will allow us to make a remote FTP connection to our remote web server which contains your web host account. Next, we need to setup our login information. Type in your Hostname, Username, and Password Click Connect. If you have problems connecting verify your username and password and the hostname You can contact your web host or check your registration info/ In most, but not all ftp programs the left panel represents our local files on our computer and the right panel represents the remote files on your web host account On the local pane navigate to your local folder where your files are being saved. On the remote pane look to see if there is a public_html folder. If you see a folder with this name double click on this folder to open. All webpage related files must be uploaded into this folder in order for your website to be viewable. Select the files you want to upload Select your local files (index.html, cmp.html, contact_me.html and various image files) then click on Put to send these files to the remote server You will also need to upload any additional files being used like images which need to also be in the grc 175 folder, it is ok to put images inside an images folder as long as your code is linking to the files within the folder 29
30 Step 7 View and Test your uploaded web pages Next, you will want to view your web address for your web host space and verify all files successfully uploaded. In a web browser, navigate to your sites URL The index page will display by default in the above example. Note: since the first page of my web site is named index.html then I could have also navigated to the uploaded page by going to: Check to make sure that your contact_me.html page also uploaded along with the images on that page Check to make sure that A1 link is working and A1 is showing Congratulations! If your web page successfully uploaded, and you are able to view its URL, and the contact_me page and all its images are showing, and there are no problems, then you are ready to have it graded. If your re having problems viewing your index page verify you have uploaded all files into the public_html folder if your web host has a folder with this name inside your web host account. Step 7 Send an with your website URL to the Instructor After you tested all your pages and links send the Instructor an with the absolute URL link to your website In the you must put GRC 175 and your full name in the subject line Extra Credit: If you wish to add more to your pages you can see the cheatsheet at the end of these instructions or go to 30
31 Grading Criteria q q q q 3 pages hand coded, saved as index.html, cmp.html and contact_me.html Provided dif titles for your three main web pages Published pages to your web host account instructor with your assignment url by the assignment due date For index.html: q Created a basic web page with some sort of content and unique title For cmp.html: q q q q Created a table with 2 columns and approx 5 rows for the class management page, cmp.html Table provides a link from A1 Contact Page to contact_me.html Added additional table attributes to your table; align, width, cellpadding, bgcolor and border Examples of centered, bold, and italicized text For contact_me.html: q q q q q q q Have another paragraph which provides two examples of the line break Include examples of centered, bold, italic Included two images with borders on your contact page, one image provides an example of a relative link and one provides an example of absolute link Added a horizontal rule somewhere on your page Added an ordered list with three list items Provided a hyperlink to another website Provided a hyperlink 31
32 Terms you should now be familiar with: URL Common web file formats: 3 most popular image files.jpg,.gif,.png.html Min required HTML tags to make a webpage Relative vs absolute paths FTP Web hosting Host/Hostname/FTP address (for connecting via FTP) Username and password (host) Domain name Plain text editor index page vs homepage web directory vs folder inside of your webspace, what s the dif? min req. tags for a webpage <html> <head> <title> </title> </head> <body> </body> </html> Popular html tags <a href="url or file location goes here">type a name for the link</a> <img src="image filename location goes here"> <p>paragraph content goes here</p> <br>line break <table> <td>cell 1 row 1 content goes here</td> <td>cell 1 row 2 content goes here</td> </table> 32
33 HTML cheat sheet sample html tags Creating your first web page using the basic HTML tags HTML tag or tags Purpose Requirements/ Location <html> <head> </head> <body> </body> </html> the required html page tags (tags) must go in this exact order with both opening and closing tags <html> <head> </head> <body> </body> </html> <title>title goes here</title> <p>text goes here</p> adds a title to the top header inside a web browser creates a new paragraph with line spacing around the paragraph must go in between the opening and closing head tags <head></head> must go somewhere in between the opening and closing body tags <body></body> <hr> adds a horizontal rule must go somewhere in between the opening and closing body tags <body></body> <hr size="3"> adds a horizontal rule 3 pixels in height must go somewhere in between the opening and closing body tags <br> <html> <head> <title>adam s first page</title> </head> <body> <p>hello this is my first page</p> <hr/> <hr size="3"> </body> </html> adds a line break, carriage return no extra spacing Basic webpage with various examples, most tags go inside the body except for title goes in the head <body></body> must go somewhere in between the opening and closing body tags <body></body> 33
34 Enhancing your web page using various attribute tags html tag or tags purpose requirements/ location makes text a heading 1 must go somewhere in between the opening and closing <h1>heading 1 text goes here</h1> size also known as a body tags headline tag <body></body> <em>italicized text goes here</em> <i>italic text goes here</i> (don t use i anymore) <strong>bold text goes here</strong> <b>bold text goes here</b> (don t use b anymore) <font size="1" color="maroon"> text with these size and color attributes goes here </font> we now use stylesheets to style text don t use font tag anymore makes text italic makes text bold adds font attributes size and color to text inside its tags must go somewhere in between the opening and closing body tags <body></body> must go somewhere in between the opening and closing body tags <body></body> must go in the opening font tag <font size="1" color="maroon"> <p align="center"> text with this align attribute goes here </p> adds paragraph align attribute to text inside its tags must go in a opening paragraph tag <p align="center"> <body background="bk.gif"> Best to use CSS stylesheets to add a bg image <body bgcolor="gray"> Best to use CSS stylesheets to add a bgcolor <body topmargin="20" leftmargin="100" rightmargin="100" > Best to use CSS stylesheets to add a body margin <ul> <li>1 st list item text goes here</li> <li>2 nd list item text goes here</li> <li>3 rd list item text goes here</li> </ul> adds a background image to the body of the web page adds a background color to the body of the web page adds body attributes topmargin, leftmargin, and rightmargin to the body of the web page adds an unordered (bulleted) list, each list item <li>list item goes here</li> will have a bullet (ball) next to it must go in the opening body tag <body background="bk.gif"> must go in the opening body tag <body bgcolor="gray" > must go in the opening body tag <body topmargin="20" leftmargin="100" rightmargin="100"> must go somewhere in between the opening and closing body tags <body></body> 34
35 <ol> <li>1 st list item text goes here</li> <li>2 nd list item text goes here</li> <li>3 rd list item text goes here</li> </ol> adds an ordered (numbered) list, each list item <li>list item goes here</li> will have a number next to it must go somewhere in between the opening and closing body tags <body></body> href, and additional html tags html tag or tags purpose requirements/ location <a href="home.html">home</a> creates a hyperlink must go somewhere in between the opening and closing body tags <body></body> <a href="home.html" title="home">home</a> <a href="mailto:contact@primometro.com">conta ct@primometro.com</a> <img src=" creates a title for your hyperlink that appears when you mouse over it, not consistent with all browsers inserts a blank single space, used when you want more than one space in html creates a mailto: hyperlink used for hyperlinking to addresses. opens up a blank compose message inside the users default program such as outlook. Not reliable since most people do not use mail programs like outlook inserts a image must go in the opening hyperlink tag <a href="home.html" title="home">home</a> must go somewhere in between the opening and closing body tags <body></body>\ must go somewhere in between the opening and closing body tags <body></body> requires the user to have an program set up in order to work. must go somewhere in between the opening and closing body tags <body></body> 35
36 adding tables to provide structure and layout to your page html tag or tags purpose requirements/ location creates a table, tag must go somewhere in between the opening and closing <table></table> requires you to add a table body tags row with a table cell see below <body></body> <td></td> <table> <td> </td> </table> <table border="10"> <table bgcolor="white" bordercolor="silver" cellpadding="5" cellspacing="0"> Best to now use style sheets to style your tables but this is still a common way to style your table <tr bgcolor="silver"> Best to now use style sheets to style your tables but still is common to use this creates a table row inside a table creates a table cell inside a table row an example of a table with one table row and one table cell adds table border attribute to table, will display with an outer border 10 pixels in width. adds table bgcolor, bordercolor, cellpadding, and cellspacing attributes. bgcolor adds a background color. bordercolor adds a border color. cellpadding adds cell padding around the cells. and cellspacing adds cell spacing between cells. adds table row bgcolor attribute must go somewhere in between the opening and closing table tags <table></table> must go in between the opening and closing table row tags a table must have opening and closing table tags. a table row and table cell must also have opening and closing tags. any table cells (table cell opening and closing tags) must go in between the opening and closing table row tags. must go in the opening table tag <table border="10"> must go in the opening table tag <table bgcolor="white" bordercolor="silver" cellpadding="5" cellspacing="0"> must go in the opening table row tag <tr bgcolor="silver"> <th></th> creates a table (cell) heading, that bolds text inside it, use instead of <td></td> must go in between the opening and closing table row tags 36
37 <table width="100%" > <table bgcolor="black" bordercolor="silver" cellpadding="5" cellspacing="0" border="1"> <tr bgcolor="silver"> <td> this is row 1 cell 1 </td> <td> this is row 1 cell 2 </td> <td> this is row 2 cell 1 </td> <td> this is row 2 cell 2 </td> </table> inserts a table attribute width of 100% an example of a table with two rows with each row having two cells. must go in the opening table tag <table width="100%"> must go somewhere in between the opening and closing body tags <body></body> Best to now use style sheets instead to style your tables, however DW allows tables to be styled using html attributes and still common to style this way using HTML 37
Adobe Dreamweaver CC 14 Tutorial
Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
Introduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
Introduction to Macromedia Dreamweaver MX
Introduction to Macromedia Dreamweaver MX Macromedia Dreamweaver MX is a comprehensive tool for developing and maintaining web pages. This document will take you through the basics of starting Dreamweaver
So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going.
Web Design 1A First Website Intro to Basic HTML So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going. Ok, let's just go through the steps
Caldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
Creating your personal website. Installing necessary programs Creating a website Publishing a website
Creating your personal website Installing necessary programs Creating a website Publishing a website The objective of these instructions is to aid in the production of a personal website published on
Introduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
How to Manage Your Eservice Center Knowledge Base
Populating and Maintaining your eservice Center Knowledge Base Table of Contents Populating and Maintaining the eservice Center Knowledge Base...2 Key Terms...2 Setting up the Knowledge Base...3 Consider
HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout
CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading
ITP 101 Project 3 - Dreamweaver
ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with
Joomla! 2.5.x Training Manual
Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials
CREATING WEB PAGES USING HTML INTRODUCTION
CREATING WEB PAGES USING HTML INTRODUCTION Web Page Creation Using HTML: Introduction 1. Getting Ready What Software is Needed FourSteps to Follow 2. What Will Be On a Page Technical, Content, & Visual
Website Development Komodo Editor and HTML Intro
Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of
Creating Personal Web Sites Using SharePoint Designer 2007
Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare
Microsoft Expression Web
Microsoft Expression Web Microsoft Expression Web is the new program from Microsoft to replace Frontpage as a website editing program. While the layout has changed, it still functions much the same as
ICT 6012: Web Programming
ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term
Dreamweaver CS6 Basics
Dreamweaver CS6 Basics Learn the basics of building an HTML document using Adobe Dreamweaver by creating a new page and inserting common HTML elements using the WYSIWYG interface. EdShare EdShare is a
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
Using Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
Advanced Drupal Features and Techniques
Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount
Microsoft FrontPage 2003 Creating a Personal Web Page
IT Services Microsoft FrontPage 2003 Creating a Personal Web Page Contents Introduction... 2 Loading a Browser... 2 Looking Behind Web Pages... 2 Creating a Web Page... 3 A Simple Page... 3 Web Page Views...
Website 101. Yani Ivanov. Student Assistant / Web Administrator
Website 101 Yani Ivanov Student Assistant / Web Administrator Information Technology for Environmental Research Area of the Hawai`i NSF EPSCoR Program Covered Topics Introduction to HTML What is it and
Getting Started with KompoZer
Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
Designing HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
COMMON CUSTOMIZATIONS
COMMON CUSTOMIZATIONS As always, if you have questions about any of these features, please contact us by e-mail at pposupport@museumsoftware.com or by phone at 1-800-562-6080. EDIT FOOTER TEXT Included
About webpage creation
About webpage creation Introduction HTML stands for HyperText Markup Language. It is the predominant markup language for Web=ages. > markup language is a modern system for annota?ng a text in a way that
Microsoft Word 2013 Creating a Personal Web Page (Level 2)
IT Training Microsoft Word 2013 Creating a Personal Web Page (Level 2) Contents Introduction... 2 Loading a Browser... 2 Looking Behind Web Pages... 2 Creating a Web Page... 3 A Simple Page... 3 Viewing
The McGill Knowledge Base. Last Updated: August 19, 2014
The McGill Knowledge Base Last Updated: August 19, 2014 Table of Contents Table of Contents... 1... 2 Overview... 2 Support... 2 Exploring the KB Admin Control Panel Home page... 3 Personalizing the Home
How To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)
ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
Microsoft FrontPage 2003
Information Technology Services Kennesaw State University Microsoft FrontPage 2003 Information Technology Services Microsoft FrontPage Table of Contents Information Technology Services...1 Kennesaw State
Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17
Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been
Umbraco v4 Editors Manual
Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
Web Design with Dreamweaver Lesson 4 Handout
Web Design with Dreamweaver Lesson 4 Handout What we learned Create hyperlinks to external websites Links can be made to open in a new browser window Email links can be inserted onto webpages. When the
Adobe Dreamweaver - Basic Web Page Tutorial
Adobe Dreamweaver - Basic Web Page Tutorial Window Elements While Dreamweaver can look very intimidating when it is first launched it is an easy program. Dreamweaver knows that your files must be organized
Creating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP
Creating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP Introduction This document describes how to create a basic web page with Netscape/Mozilla Composer and how to publish
IAS Web Development using Dreamweaver CS4
IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute
Creating Web Pages With Dreamweaver MX 2004
Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic
How to Edit Your Website
How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing
Site Maintenance. Table of Contents
Site Maintenance Table of Contents Adobe Contribute How to Install... 1 Publisher and Editor Roles... 1 Editing a Page in Contribute... 2 Designing a Page... 4 Publishing a Draft... 7 Common Problems...
CSE 3. Marking Up with HTML. Tags for Bold, Italic, and underline. Structuring Documents. An HTML Web Page File
CSE 3 Comics Updates Shortcut(s)/Tip(s) of the Day Google Earth/Google Maps ssh Anti-Spyware Chapter 4: Marking Up With HTML: A Hypertext Markup Language Primer Fluency with Information Technology Third
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353
Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...
Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...
Creating an HTML Document Using Macromedia Dreamweaver
INFORMATION SYSTEMS SERVICES Creating an HTML Document Using Macromedia Dreamweaver This tutorial workbook contains a series of exercises that give an introduction to creating HTML documents for the World
Dreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012)
WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) BY MISS. SAVITHA R LECTURER INFORMATION SCIENCE DEPTATMENT GOVERNMENT POLYTECHNIC GULBARGA FOR ANY FEEDBACK CONTACT TO EMAIL:
Mapping ITS s File Server Folder to Mosaic Windows to Publish a Website
Mapping ITS s File Server Folder to Mosaic Windows to Publish a Website April 16 2012 The following instructions are to show you how to map your Home drive using ITS s Network in order to publish a website
Basic Web Development @ Fullerton College
Basic Web Development @ Fullerton College Introduction FC Net Accounts Obtaining Web Space Accessing your web space using MS FrontPage Accessing your web space using Macromedia Dreamweaver Accessing your
Email Campaign Guidelines and Best Practices
epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead
Intro to Web Development
Intro to Web Development For this assignment you will be using the KompoZer program because it free to use, and we wanted to keep the costs of this course down. You may be familiar with other webpage editing
Website Planning Checklist
Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even
Lab 1: Create a Personal Homepage
Objectives: Lab 1: Create a Personal Homepage Understand the basics of HTML Create a personal website, if you do not have one Learn how to submit your assignments Preparation 1. Create a folder with the
PE Content and Methods Create a Website Portfolio using MS Word
PE Content and Methods Create a Website Portfolio using MS Word Contents Here s what you will be creating:... 2 Before you start, do this first:... 2 Creating a Home Page... 3 Adding a Background Color
Introduction to Drupal
Introduction to Drupal Login 2 Create a Page 2 Title 2 Body 2 Editor 2 Menu Settings 5 Attached Images 5 Authoring Information 6 Revision Information 6 Publishing Options 6 File Attachments 6 URL Path
ADOBE DREAMWEAVER CS3 TUTORIAL
ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO
Quick Reference Guide
Simplified Web Interface for Teachers Quick Reference Guide Online Development Center Site Profile 5 These fields will be pre-populated with your information { 1 2 3 4 Key 1) Website Title: Enter the name
Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)
Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) In this project, you will learn the web publishing skills you need to: Plan a website Define a
KOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
An Attribute is a special word used inside tag to specify additional information to tag such as color, alignment etc.
CHAPTER 10 HTML-I BASIC HTML ELEMENTS HTML (Hyper Text Markup Language) is a document-layout and hyperlink-specification language i.e., a language used to design the layout of a document and to specify
Dreamweaver Tutorial #1
Dreamweaver Tutorial #1 My first web page In this tutorial you will learn: how to create a simple web page in Dreamweaver how to store your web page on a server to view your page online what the Internet
Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4
CMS Editor How-To Saving work in the CMS... 2 Edit an existing page... 2 Create a new page... 4 Create a side bar section... 4 Upload an image and add to your page... 5 Add an existing image to a Page...
NJCU WEBSITE TRAINING MANUAL
NJCU WEBSITE TRAINING MANUAL Submit Support Requests to: http://web.njcu.edu/its/websupport/ (Login with your GothicNet Username and Password.) Table of Contents NJCU WEBSITE TRAINING: Content Contributors...
Web Design Mastery. Quick Start Guide
Web Design Mastery Quick Start Guide By Shelley Lowery WebDesignMastery.com Page 1 This is NOT a free ebook & does not have resell rights This guide is for your own personal use and may NOT be distributed
Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College *
Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Some Student Organizations are on our web server called
Chapter 2 HTML Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 2 HTML Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 First Web Page an opening tag... page info goes here a closing tag Head & Body Sections Head Section
Web Publishing Basics 2
Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What
Basic Website Maintenance Tutorial*
Basic Website Maintenance Tutorial* Introduction You finally have your business online! This tutorial will teach you the basics you need to know to keep your site updated and working properly. It is important
Site Maintenance Using Dreamweaver
Site Maintenance Using Dreamweaver As you know, it is possible to transfer the files that make up your web site from your local computer to the remote server using FTP (file transfer protocol) or some
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
Formatting Text in Blackboard
Formatting Text in Blackboard If you want to spice up your blackboard announcements with different color of the text, bolded text, italicized text, lists, tables and images you can do so by typing HTML
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 1
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 1 The demand for Web Development skills is at an all time high due to the growing demand for businesses and individuals to
CS412 Interactive Lab Creating a Simple Web Form
CS412 Interactive Lab Creating a Simple Web Form Introduction In this laboratory, we will create a simple web form using HTML. You have seen several examples of HTML pages and forms as you have worked
OU Campus Web Content Management
DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT OU Campus Web Content Management Table of Contents OU Campus Web Content Management... 1 Introduction
Web Portal User Guide. Version 6.0
Web Portal User Guide Version 6.0 2013 Pitney Bowes Software Inc. All rights reserved. This document may contain confidential and proprietary information belonging to Pitney Bowes Inc. and/or its subsidiaries
Urban Planet Website Content Management System. Step-by-Step Instructions
Urban Planet Website Content Management System Step-by-Step Instructions For steps with pictures, videos, version bugs, integration ideas, and more see http://uphelp.spps.org Department of Educational
Create a GAME PERFORMANCE Portfolio with Microsoft Word
Create a GAME PERFORMANCE Portfolio with Microsoft Word Planning A good place to start is on paper. Get a sheet of blank paper and just use a pencil to indicate where the content is going to be positioned
04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks
One of the greatest strengths of Hypertext Markup Language is hypertext the ability to link documents together. The World Wide Web itself consists of millions of html documents all linked together via
CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide
CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits
CMS Training. Prepared for the Nature Conservancy. March 2012
CMS Training Prepared for the Nature Conservancy March 2012 Session Objectives... 3 Structure and General Functionality... 4 Section Objectives... 4 Six Advantages of using CMS... 4 Basic navigation...
PASTPERFECT-ONLINE DESIGN GUIDE
PASTPERFECT-ONLINE DESIGN GUIDE INTRODUCTION Making your collections available and searchable online to Internet visitors is an exciting venture, now made easier with PastPerfect-Online. Once you have
DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit
DREAMWEAVER BASICS A guide to updating Faculty websites Created by the Advancement & Marketing Unit Table of content Tip: Click on the links below to go straight to the desired section The W (Web Services)
Where do I start? DIGICATION E-PORTFOLIO HELP GUIDE. Log in to Digication
You will be directed to the "Portfolio Settings! page. On this page you will fill out basic DIGICATION E-PORTFOLIO HELP GUIDE Where do I start? Log in to Digication Go to your school!s Digication login
What is a Web Browser? Web Site Functionality. A client program that uses HTTP to communicate with web servers.
What is a Web Browser? Web Site Functionality April 1, 2004 A client program that uses HTTP to communicate with web servers. HTML interpreter Reads HTML, determines how to display it A Simple HTML file
HTML, CSS, XML, and XSL
APPENDIX C HTML, CSS, XML, and XSL T his appendix is a very brief introduction to two markup languages and their style counterparts. The appendix is intended to give a high-level introduction to these
GUIDELINES FOR SCHOOL WEB PAGES
GUIDELINES FOR SCHOOL WEB PAGES Introduction Mountain Home Public School District School web pages are public documents welcoming the outside world to our school and linking our students and staff to outside
Creating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
General Electric Foundation Computer Center. FrontPage 2003: The Basics
General Electric Foundation Computer Center FrontPage 2003: The Basics September 30, 2004 Alternative Format Statement This publication is available in alternative media upon request. Statement of Non-discrimination
Joomla Article Advanced Topics: Table Layouts
Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand
Dreamweaver. Links and Tables
Dreamweaver Links and Tables WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 ADDING HYPERLINKS... 2 New Text Hyperlink 2 Existing Text or Image Hyperlink 2 EXERCISE 1 3 New Text E-mail
Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter)
Jadu Content Management Systems Web Publishing Guide Table of Contents (click on chapter titles to navigate to a specific chapter) Jadu Guidelines, Glossary, Tips, URL to Log In & How to Log Out... 2 Landing
How To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For
How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK