TEXT Programming

8/6/2019 TEXT Programming

http://slidepdf.com/reader/full/text-programming 1/14

Basic HTML/CSS Programming Basic HTML/CSS Programming using Adobe Dreamweaverusing 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 AdobeDreamweaver. 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. We’ll startwith 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 browserwill 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 writteninstructions I put on the style

sheets as my guide… (theyare not included in the

codes)



The <body></body> is where we put all our pagecontents. Here, I’ve typed ‘This is a Text’ using<h1></h1> to show how the CSS codes we declaredabove will take its effect.

The syntax declaration fortext / fontcolor.

the syntax declaration we need toput to incorporate CSS codes toHTML.

I changed the title of the document from ‘UntitledDocument’ to ‘My Sample Page’.



After typing the code, donAfter typing the code, don’’tt

forget to save by clicking theforget to save by clicking the

File dropdown menu, thenFile dropdown menu, then

Save.Save.

Next, is to preview it in aNext, is to preview it in a

browser by clicking thebrowser by clicking the ‘‘worldworld’’

icon then choosing theicon then choosing the

browser where you want tobrowser where you want toview your output.view your output.

You have to remember theseYou have to remember these

2 steps because you will have2 steps because you will have

to do theseto do these everytimeeverytime youyou

make a change in your codingmake a change in your codingand view your output.and view your output.



Above shows how the output in the browser looks like.. By the way, Ichose 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 anyunit 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 CSSdeclarations above will be applied.



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



• text-transform – is where turning letters to capittal or small letter (values can benone,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 orlength[unit of measurement; in my example, I used pixel)

• word-spacing – as the name implies it is used to give space between words, itcan 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 twovalues, “left-to-right’ and “right-to-left” (ltr, rtl)

This is where yourstated CSSdeclarations above willbe applied.



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



That’s just the basic codes to

use to move and design yourTexts using CSS codes in

your HTML.

TEXT Programming

Documents