Scribd Logo
Carica

Benvenuto in Scribd!

  • PequeCurso HTML by Dianiita Kawaii

    Caricato da

    Paul Mejia
    40 visualizzazioni7 pagine

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    40 visualizzazioni7 pagine

    PequeCurso HTML by Dianiita Kawaii

    Caricato da

    Paul Mejia

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 7

    Este epequeo ocursoessolopara entrarun npocoenelmundo o delH HTML,yaquemuch hasblogge er@snoti ienenidea adecosas s com moestasyquesonmuy m benef ficiosasalahorade

    equerer cam mbiareldiseo,deagregar a ut tilidadesydems. Asq quecones stonopre etendoqu uearmenuna u mega pgina solo osoncono ocimientos sbsicos: :)...nosecrean c que esoyuna web bmasterni imuchomenos m par raesomefaltaapre ender muc chascosas sxD. Para alosejemplosutilizaremose lblocdenotas n (si!El E blocde nota asxD)notienen t que edescarga arnadayesmsqu uetilpar ra ,poresosiempre lafu uncinque equeremo osutilizar, s quequiera an man ndarunc digoHTM MLaalguie enesbuen noqueloenvenen n unb blocdeno otasyaque eWordpo odratransformareltextoy daa arlo. LoscdigosHTMLlospondr p en colorrosa aylasnot tasenun colo orgris,par raquedist tingan:). Buenonoesms m asqu ueempece emosconlosconce eptosbsic co n___ _n

    HTML H ,siglasde HyperText H Markup M Language L (Le enguaje de d Marcadode Hipertexto H ),es e el lenguajede marcado m predominant p tepara laelaboraci nde pginas p web.Es usado u para describir d la estructura e yel contenido c en nforma de d texto,ascomo para p complementar el e textoconobjetos o tales t como imgenes.HT TMLse escribe e enfo ormade etiquetas, rodeadas r por r corchetes c angulares (<,>). ( HTML tambin t puede describir, d has staun cierto c punto, ,la apariencia a de eun documento, d y puede p incluir run script s (porejemplo Javascript),el e cual puede p afecta arel comportamie c entode navegadores n sweby otros o procesa adores de d HTML.(Wikipedia)

    Estructura
    Todapginawebsecomponedeunacabecera(head),uncuerpo(body)y empiezanconlaetiqueta<html>siempresinexcepcinalguna,entonces lobsicodeunapginaquedaraas: <html> <head></head> <body> </body> </html> Comopuedevertodaetiquetavaencerradadentrodeloscorchetes(<,>) ytodaetiquetaquefinalicedebeirantepuestadeestabarra/. Dentrodelasetiquetaheadpodremosponeralgunascosasyenlade bodyotras,nocreanquetodoloqueselesocurrairapegadoen cualquieraxD,peroesomasadelanteconejemploslovern. SiustedesquierenveruncdigoHTMLdealgunapginapuedenhacer esto;ensunavegador(Firefox)danclicderechoalapginayescogenen laopcinvercdigofuentedelapgina;(Internetexplore)vanala imagendeherramientas,yescogenlaopcinHerramientasdedesarrollo F12,ahlessaldrunanuevaventanacontodoelcdigodelapginaque eligieronypodrnvermuchasetiquetasqueseutilizaron.^^ Buenohastaelmomentolaestructuraesmuyfcil,yasabencmo empiezaunapginaweb,lasetiquetasbsicasquesecomponenycomo empezaryfinalizarestas.

    Titulo y fondo
    Ahoravamosaponerleuntituloyunfondoanuestrapginaweb Laetiquetadelttuloseriaas<title>y</title>estettuloeselquese mostraraennuestrapginaylaquetomaraelnavegadorparamostrar Asqueabramosnuestroblocdenotaycoloquemoslaestructuraqueira deestamanera: <html> <head><title>Mipaginaweb:3</title></head> <body> </body> </html> AhoravasaArchivo Guardarcomoponleelnombrequedeseesyle pones:.html(ejemplo:mipaginaweb.html),ahoravealacarpetayte debeaparecerenvezdeltpicoiconodeblocdenotaseliconodetu navegadorpordefecto

    Ahpuedesverqueeltituloqueleasignamosestapuesto^^porahora obviamentetupginaestaenblancoporquenolehemosindicadonada mas=). Vamosaponeralgodecolorenlaetiquetabody,paraloscolores debemosoestilosdebemosutilizaralgollamadocss.

    Punto aparte

    CSS (CascadingStyle Sheets)


    CSSesunlenguajedeestiloquedefinelapresentacindelosdocumentos HTML.Porejemplo,CSSabarcacuestionesrelativasafuentes,colores, mrgenes,lneas,altura,anchura,imgenesdefondo,posicionamiento avanzadoymuchosotrostemas.
    HTMLseusaparaestructurarelcontenido;CSSseusaparaeldiseo

    UnacortapresentacindeCSS^^. Paraelfondoutilizaremosesto <html> <head><title>Mipaginaweb:3</title></head> <bodybgcolor=#E6E6FA> </body> </html>

    Claroqueenlosblogsescomn/normalencontraresteotrocdigoque efectivamentesirvemejorC:
    background-color: #FFFFFF background-image: url(urldetuimagen);

    Imgenes y Enlaces
    Ahoravamosconlasimaginesycomohacerenlacesenunaimagen,oen unapalabra,estoescomolomasesencialenlosblogsxDymasdeun@ yadebeestarfamiliarizadoconestoscdigos.:) Paratusimagineselcdigoeseste: <imgsrc=urldetuimagen></img> Paralosenlacesesesta: <ahref=urltarget=_black>textooimagen</a> Esossonloscdigos,yoyadetantoutilizarlosmelossedememoria,al principiohayquemirarocopiarypegar,peroluegodeuntiempoespura inerciajaja,asquenosepreocupen;). Puedenverqueenelsegundocdigoleagregueunapartecitaennaranja, buenoestosirveparaqueeselinkquepusisteseabraenunanueva pestaa^^,igualsinoquieresseloquitasylisto.

    Imgenes propiedades
    Laspropiedadesmsbsicas: width="#px"(Controlaelanchodelaimagen) height="#px"(Controlaelaltodelaimagen) border="#px"(siquieresponerlebordeatuimagen) aling=left~right~top~middle~bottom(aliniarconuntexto)

    erunejem mplo,claro oqueentu t blognolepondr s Ahpuedenve /Pikachu.jpg,yolohicease sporquecomoesen e micom mputadorXD, X y img/ asie escomodebequedarladirec ccinpara aquesepu uedavisua alizar^^. Tam mbinpued denverqu ueentree elcdigode d imagen nyenlace puseun<br>, < esepequeocdigosir rveparaquesehagaunsalto oporaside ecirlo.Ejm m:

    con n<br> > Sin<br r>


    Porltimolesquierodejarunasrecopilacionesdeenlacesquelespueden servirparaquesiganaprendiendo.

    http://www.comocreartuweb.com/ (amo esta pgina) Cambiar color al texto seleccionado Codigo Textarea * cajita de texto* Efecto Opacidad Galera thumbnail Marquee [animacin HTML] Mas info para personalizar tu blog!

    Potrebbero piacerti anche