Taula de continguts:

Pàgina web de Bare Bones: 10 passos
Pàgina web de Bare Bones: 10 passos

Vídeo: Pàgina web de Bare Bones: 10 passos

Vídeo: Pàgina web de Bare Bones: 10 passos
Vídeo: НОЧЬ В СТРАШНОМ ДОМЕ С ДЕМОНОМ / НЕ СТОИЛО СЮДА ПРИХОДИТЬ 2024, De novembre
Anonim
Pàgina web de Bare Bones
Pàgina web de Bare Bones

Avui crearem una pàgina web d’ossos nus molt senzilla des de zero. Parlarem d’elements HTML, de l’estil de la vostra pàgina web (colors, tipus de lletra, alineació, etc.) i, finalment, de com inserir una imatge a la vostra pàgina web.

Al final d’aquest instructiu, tindreu les habilitats bàsiques per crear una pàgina web des de zero i descobrireu que la codificació no és tan dura com sembla.

Pas 1: utilitzar el bloc de notes

Utilitzant el bloc de notes
Utilitzant el bloc de notes
Utilitzant el bloc de notes
Utilitzant el bloc de notes

Utilitzarem el Bloc de notes a Windows per crear la nostra primera pàgina web. Tot i que ho farà qualsevol editor de text, el bloc de notes ve preinstal·lat a les màquines Windows, de manera que és un gran punt de partida.

Per obrir el bloc de notes, aneu a la barra de cerca a l'extrem inferior esquerre de la pantalla i escriviu "Bloc de notes". A continuació, seleccioneu l'aplicació "Bloc de notes" que apareix als resultats de la cerca. S'hauria d'obrir una finestra nova.

Pas 2: afegir l'arbre de documents HTML bàsic

Afegir l'arbre de documents HTML bàsic
Afegir l'arbre de documents HTML bàsic

Totes les pàgines web han de seguir una estructura esquelètica estàndard perquè el vostre navegador web (Chrome, Firefox, Edge, Internet Explorer, Safari …) processi i mostri la vostra pàgina web.

Això s’anomena arbre de documents html. Al Bloc de notes, escriviu els "elements" o "etiquetes" html tal com es mostra a la captura de pantalla. No dubteu a copiar i enganxar també:

Pas 3: desar com a pàgina.html

Desar com a pàgina.html
Desar com a pàgina.html
Desar com a pàgina.html
Desar com a pàgina.html
Desar com a pàgina.html
Desar com a pàgina.html

Ara que tenim la nostra estructura html bàsica al Bloc de notes, guardem-la perquè no perdem cap feina i puguem veure els nostres canvis a mesura que avancem al llarg de l’Instruible.

  1. Seleccioneu "Fitxer"> "Desa com …" (captura de pantalla 1)
  2. Canvieu el tipus de fitxer a "Tots els fitxers" (captura de pantalla 2)
  3. Doneu al vostre fitxer el nom que vulgueu. Assegureu-vos de fixar-vos en el lloc on deseu el document a l’ordinador per poder obrir-lo més tard. NOTA: La part més important de desar aquest fitxer és afegir ".html" al final del nom del fitxer. Això permetrà que el vostre equip el reconegui com a pàgina web. Per tant, si voleu anomenar el fitxer "la meva_pàgina web", assegureu-vos d'afegir.html al final, p. Ex. "my_webpage.html"

Pas 4: afegir un títol a la vostra pàgina web

Afegir un títol a la vostra pàgina web
Afegir un títol a la vostra pàgina web

Per tant, tenim l’estructura html bàsica necessària perquè els navegadors web interpretin i mostrin la nostra pàgina web, però no tenim cap contingut. Canviem això!

El primer que hem de fer és donar un títol a la nostra pàgina web. La majoria de totes les pàgines web tenen un títol. Això és el que es mostra a la pestanya del navegador web (vegeu la captura de pantalla). Vaig a donar a la meva pàgina web el títol de "Lloc web de Taylor". Per fer-ho, hem d'afegir un element "title".

Lloc web de Taylor

En aquest moment, notareu que cada etiqueta té una etiqueta "d'obertura" i una etiqueta "de tancament". Tal com

i.

Es tracta de discernir on comença i on acaba el títol. Gairebé totes les etiquetes html segueixen això, però hi ha algunes excepcions.

Pas 5: afegir contingut a la vostra pàgina web

Bé, tenim un títol per a la nostra pàgina web, però encara no en tenim cap contingut real. Afegim un toc!

Hem afegit un títol a la nostra pàgina web mitjançant un element "title". Donem a la nostra pàgina web una capçalera gran i captadora d'atenció mitjançant un element "h1" que és un element de capçalera.

Lloc web de Taylor

Benvingut a la meva pàgina web

Pas 6: Visualització dels nostres canvis fins ara

Veure els nostres canvis fins ara
Veure els nostres canvis fins ara

Tenim un títol, tenim contingut, anem a veure la nostra pàgina web sobre com està arribant fins ara.

  1. Deseu el fitxer al bloc de notes
  2. Aneu a on heu desat el fitxer i feu-hi doble clic. S'hauria d'obrir automàticament al navegador web predeterminat. Veures be!

Pas 7: afegir una etiqueta de paràgraf

Tenim un títol, un encapçalament, ara afegim un paràgraf amb una mica més de text. El nom de l'element d'un paràgraf és "p". Podeu veure el seu ús a continuació:

Lloc web de Taylor

Benvingut a la meva pàgina web

Avui aprendrem a crear aquesta pàgina web molt senzilla.

Nota: Podeu veure els canvis sempre que vulgueu desant el bloc de notes i obrint el fitxer.

Pas 8: doneu-li una mica de color

Dóna-li una mica de color
Dóna-li una mica de color

Tenim la nostra pàgina web rodant bé, però és bastant senzilla. Donem color a la nostra etiqueta de paràgraf.

Podem acolorir diferents elements afegint un atribut "estil" a l'etiqueta "p" tal com es detalla a continuació:

Lloc web de Taylor

Benvingut a la meva pàgina web

Avui aprendrem a crear aquesta pàgina web molt senzilla.

Pas 9: afegir una imatge

Què és un lloc web sense imatges? Afegim una imatge al nostre lloc web!

El primer pas és trobar una imatge que us agradi. He utilitzat imatges de Google per buscar un golden retriever. Traieu la imatge cap amunt i assegureu-vos que l'URL acabi en.jpg,.png,.gif,.jpg, etc.

Un cop hàgiu triat la vostra imatge, l’hem d’afegir a la pàgina html mitjançant l’etiqueta "img". La meva imatge és:

Afegiu-lo a la vostra pàgina mitjançant una etiqueta "img" amb l'atribut "src":

Lloc web de Taylor

Benvingut a la meva pàgina web

Avui aprendrem a crear aquesta pàgina web molt senzilla.

Image
Image

Pas 10: Visualització del producte final

Visualització del producte final
Visualització del producte final

Deseu el fitxer del bloc de notes i obriu el producte final. Hauríeu de veure la vostra pàgina web.

Recomanat: