Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • What Is HTML?: Emphasised Text. This Is A Heading This Is A Subheading

    Загружено:

    Allan James Caño
    45 просмотров6 страниц
    HTML CSS Basics

    Оригинальное название

    HTML_CSS

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    DOC, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    HTML CSS Basics

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    45 просмотров6 страниц

    What Is HTML?: Emphasised Text. This Is A Heading This Is A Subheading

    Загружено:

    Allan James Caño
    HTML CSS Basics

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 6

    HTML AND CSS What is HTML? HTML is the language for describing the structure of Web pages.

    HTML gives authors the means to !ublish online documents "ith headings# te$t# tables# lists# photos# etc. %etrieve online information via h&perte$t lin's# at the clic' of a button. Design forms for conducting transactions "ith remote services# for use in searching for information# ma'ing reservations# ordering products# etc. (nclude spread)sheets# video clips# sound clips# and other applications directl& in their documents.

    With HTML# authors describe the structure of pages using mar'up. The elements of the language label pieces of content such as *paragraph#+ *list#+ *table#+ and so on. Hyper is the opposite of linear. (n the good old da&s ) "hen a mouse "as something the cat chased ) computer programs ran linearl& "hen the program had e$ecuted one action it "ent to the ne$t line and after that# the ne$t line and so on. ,ut HTML is different ) &ou can go "herever &ou "ant and "henever &ou "ant. -or e$ample# it is not necessar& to visit MSN.com before &ou visit HTML.net. Text is self)e$planator&. Mark)up is "hat &ou do "ith the te$t. .ou are mar'ing up the te$t the same "a& &ou do in a te$t editing program "ith headings# bullets and bold te$t and so on. Language is "hat HTML is. (t uses man& /nglish "ords. 0. /lements give structure to a HTML document and tells the bro"ser ho" &ou "ant &our "ebsite to be presented. 1enerall& elements consists of a start tag# some content# and an end tag. 2. Tags are labels &ou use to mar' up the beginning and end of an element. All tags have the same format the& begin "ith a less)than sign 343 and end "ith a greater)than sign 353. /$amples
    <em>Emphasised text.</em> <h1>This is a heading</h1> <h2>This is a subheading</h2> Emphasised text.

    This is a heading This is a subheading

    6. .ou can add attributes to a number of elements.

    What is an attribute7

    As &ou probabl& remember# elements give structure to a HTML document and tells the bro"ser ho" &ou "ant &our "ebsite to be presented 8for e$ample# 4br 95 informs the bro"ser to ma'e a line brea':. (n some elements &ou can add more information. Such additional information is called an attribute.
    <h2 style="background color!"##$$$$%">&y #riendship 'ith (T&)</h2>

    <html> <head> </head> <body style="background color!"##$$$$%"> </body> </html>

    BASIC TEMPLATE
    <html> <head> <title></title> </head> <body> </body> </html>

    TAGS and ATTRIBUTES 1. Image <img> Attributes Src Align ,order Height Width 2. Tab es <tab e> <!tab e> Table /lements a. Table Heading 4th5= b. %o"s 4tr5= c. cells8table data: #4td5 ;alue <%L ,ottom Middle#Left#%ight !i$els !i$els !i$els Description Specifies of an image Specifies the alignment of an image according to its surroundings Specifies the "idth of the border around an image Specifies the height of an image Specifies the "idth of an image

    Splitting columns or ro"s 4colspan54ro"span5 With cell padding 4html5 Without cell padding 4head54title5Sample49title549head5 )Cellpadding is used to create more "hite spaces bet"een the cell content and its borders. 4html5 4bod&5 4head54title5Sample49title549head5 4h05 Table "ithout Cellpadding49h05 4bod&5 4table border>+0+ 4h05 Table "ithout Cellpadding49h05 Cellpadding>+0@+5 4table border>+0+5 4tr5 4tr5 4td5 Apple49td5 4td5 Apple49td5 4td5Mango49td5 4td5Mango49td5 49tr5 49tr5 Adding Cellpadding 4tr5 4td5 Cherr&49td5 4td5 ?range49td5 49tr5 2 49bod&5 49html5 4tr5 4td5 Cherr&49td5 4td5 ?range49td5 49tr5 49bod&5 49html5

    ". Un#$de$d and %$de$d a. <nordered 4ul5 b. ?rderd 4ol5 &. 'e(initi#n List Definition list is a list of items "ith a description of each item. a. 4dl5 definition list /ach list item starts "ith the 4li5 list tag and mar'ed "ith bullets /ach list item starts "ith the 4li5 list tag and mar'ed "ith numbers

    b. 4dt5 definition item c. 4dd5 describes the item in the list ). *#$ms <(#$m> 8@: -ive Different t&pes of (nput /lement 0. Te$t -ield 2. !ass"ord -ield 6. %adio ,utton A. Chec' ,o$ @. Submit ,utton +. '$#, d#-n List A dropdo"n list is created using 4select5 and closed b& 49select5 tag. (nside a select tag# there must be a 4option value>+option+5 "hich is used to add an option value for the selected tag. 4input t&pe> *te$t+ 95 4input t&pe> *pass"ord+ 95 4input t&pe> *radio+ 95 4input t&pe> *chec'bo$+ 95 4input t&pe> *singson+ 95

    /$ 4bod&5 4form action>++5 4select name>+-ruits+5 4option value>+ A+ 5 Apple49option5 4option value>+ ,+ 5 ?range49option5 6

    4option value>+ C+ 5 ,anana49option5 4option value>+ D+ 5 Mango49option5 49select5 49form549bod&5 What is .HTML? BHTML is a variant of HTML that uses the s&nta$ of BML# the /$tensible Mar'up Language. BHTML has all the same elements 8for paragraphs# etc.: as the HTML variant# but the s&nta$ is slightl& different. ,ecause BHTML is an BML application# &ou can use other BML tools "ith it 8such as BSLT# a language for transforming BML content:.

    What is /SS? /SS is the language for describing the presentation of Web pages# including colors# la&out# and fonts. (t allo"s one to adapt the presentation to different t&pes of devices# such as large screens# small screens# or printers. CSS is independent of HTML and can be used "ith an& BML)based mar'up language. The separation of HTML from CSS ma'es it easier to maintain sites# share st&le sheets across pages# and tailor pages to different environments. This is referred to as the separation of structure 8or content: from presentation. What is the di((e$en0e bet-een /SS and HTML? HTML is used to structure content. CSS is used for formatting structured content. Whi0h bene(its -i /SS gi1e me? CSS "as a revolution in the "orld of "eb design. The concrete benefits of CSS include control la&out of man& documents from one single st&le sheet= more precise control of la&out= appl& different la&out to different media)t&pes 8screen# print# etc.:= numerous advanced and sophisticated techniCues.

    <sing HTML "e could have done it li'e this 4bod& bgcolor>3D--EEEE35

    With CSS the same result can be achieved li'e this bod& Fbac'ground)color D--EEEE=G

    As &ou "ill note# the codes are more or less identical for HTML and CSS. The above e$ample also sho"s &ou the fundamental CSS model

    A,, 2ing /SS t# an HTML d#03ment Method 0 (n)line 8the attribute st&le: ?ne "a& to appl& CSS to HTML is b& using the HTML attribute st&le.
    <html>

    4head5 4title5/$ample49title5 49head5 4bod& st&le>3bac'ground)color D--EEEE=35 4p5This is a red page49p5 49bod&5 49html5 Method 2 (nternal 8the tag st&le: Another "a& is to include the CSS codes using the HTML tag 4st&le5.
    <html> <head> <title>Example</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>This is a red page</p> </body> </html>

    Method 6 /$ternal 8lin' to a st&le sheet: The recommended method is to lin' to a so)called e$ternal st&le sheet. Throughout this tutorial "e "ill use this method in all our e$amples. An e$ternal st&le sheet is simpl& a te$t file "ith the e$tension .css. Li'e an& other file# &ou can place the st&le sheet on &our "eb server or hard dis'. -or e$ample# letHs sa& that &our st&le sheet is named st&le.css and is located in a folder named st&le. The situation can be illustrated li'e this

    The trick is to create a link from the HTML document (default.htm) to the style sheet (style.css). Such link can be created with one line of HTML code: <link rel= stylesheet ty!e= te"t#css href= style#style.css #$ %otice how the !ath to our style sheet is indicated usin& the attribute hre#. The line of code must be inserted in the header section of the HTML code i.e. between the <head> and </head> ta&s. Like this: <html$ <head$ <title$My document<#title$ <link rel= stylesheet ty!e= te"t#css href= style#style.css #$ <#head$
    @

    <body$ ...

    This link tells the browser that it should use the layout from the 'SS file when dis!layin& the HTML file. The really smart thin& is that se(eral HTML documents can be linked to the same style sheet. )n other words* one 'SS file can be used to control the layout of many HTML documents.

    -or more formatting tags Iimage bac'groundJ http 99html.net9tutorials9css9lesson6.php %eference http 99html.net9tutorials9css9introduction.php http 99"""."6schools.com9css9default.asp

    Вам также может понравиться