Vous êtes sur la page 1sur 14

Basic HTML/CSS Programming using Adobe Dreamweaver

Adobe Dreamweaver is a web software application that provides total support for website creation and management. This advanced program meets the needs of many skills levels, from professional web designers to beginners just learning about webpage creation.

HTML/CSS Coding with

TEXT

First, these programming languages are what you will see when you start running the Adobe Dreamweaver. I assume that you are somewhat familiar if not fully knowledgeable with HTML. In this tutorial, we will incorporate CSS codes with HTML in styling your website. Well start with the very basic feature of webpage creation TEXT. Click HTML from the Create New list above.

As you click HTML, a worksheet will appear as above here is where we will do our HTML and CSS coding..

The initial codes above are already written by default. These tells how the web browser should read and interpret your web browser tags and codes. The browser will use different engines to interpret the different HTML code that you use. We will start from here.

In the next windows, just read on the red written instructions I put on the style sheets as my guide (they are not included in the codes)

I changed the title of the document from Untitled Document to My Sample Page.

The syntax declaration for text / fontcolor.

the syntax declaration we need to put to incorporate CSS codes to HTML.

The <body></body> is where we put all our page contents. Here, Ive typed This is a Text using <h1></h1> to show how the CSS codes we declared above will take its effect.

After typing the code, dont forget to save by clicking the File dropdown menu, then Save. Next, is to preview it in a browser by clicking the world icon then choosing the browser where you want to view your output. You have to remember these 2 steps because you will have to do these everytime you make a change in your coding and view your output.

Above shows how the output in the browser looks like.. By the way, I chose to view my outputs in Chrome browser.

Additional Declarations: text-indent - indents the first line of a text (length values can be in pixels, %, or any unit of measurement) text-align - Aligns the text in an element (values can be left, right, center or justify) text-decoration - Adds decoration to text (values can be none, underline, over line, line-through, blink)

This paragraph enclosed in <p></p> is where your stated CSS declarations above will be applied.

After Saving (refer to slide 9), youre suppose to view your output as shown above

text-transform is where turning letters to capittal or small letter (values can be none,capitalize,uppercase,lowercase) line-height - sets the distance between the line height of a sentence from another sentence. (values can be normal, length(unit of measurement),number, %) letter-spacing - used to give space between letters (values can be normal or length[unit of measurement; in my example, I used pixel) word-spacing as the name implies it is used to give space between words, it can increase or decrease the space. (values can be normal, length[unit of measurement]) direction - set the text direction, gives it an order to follow, there are only two values, left-to-right and right-to-left (ltr, rtl)

This is where your stated CSS declarations above will be applied.

After Saving (refer to slide 9), youre suppose to view your output as shown above..

Thats just the basic codes to use to move and design your Texts using CSS codes in your HTML.

Vous aimerez peut-être aussi