Taula de continguts:
- Pas 1: utilitzar el bloc de notes
- Pas 2: afegir l'arbre de documents HTML bàsic
- Pas 3: desar com a pàgina.html
- Pas 4: afegir un títol a la vostra pàgina web
- Pas 5: afegir contingut a la vostra pàgina web
- Benvingut a la meva pàgina web
- Pas 6: Visualització dels nostres canvis fins ara
- Pas 7: afegir una etiqueta de paràgraf
- Benvingut a la meva pàgina web
- Pas 8: doneu-li una mica de color
- Benvingut a la meva pàgina web
- Pas 9: afegir una imatge
- Benvingut a la meva pàgina web
- Pas 10: Visualització del producte final
Vídeo: Pàgina web de Bare Bones: 10 passos
2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:15
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
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
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
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.
- Seleccioneu "Fitxer"> "Desa com …" (captura de pantalla 1)
- Canvieu el tipus de fitxer a "Tots els fitxers" (captura de pantalla 2)
- 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
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
Tenim un títol, tenim contingut, anem a veure la nostra pàgina web sobre com està arribant fins ara.
- Deseu el fitxer al bloc de notes
- 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
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.
Pas 10: 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:
Control de la brillantor del Led mitjançant Raspberry Pi i pàgina web personalitzada: 5 passos
Control de la brillantor del led mitjançant Raspberry Pi i pàgina web personalitzada: amb un servidor apache al meu pi amb php, he trobat una manera de controlar la brillantor d’un led mitjançant un control lliscant amb una pàgina web personalitzada que és accessible a qualsevol dispositiu connectat a la mateixa xarxa que el vostre pi Hi ha moltes maneres en què això es pot fer
ESP8266 Ventilador POV amb rellotge i actualització de text de la pàgina web: 8 passos (amb imatges)
ESP8266 Ventilador POV amb rellotge i actualització de text de la pàgina web: es tracta d’una velocitat variable, POV (persistència de la visió), ventilador que mostra de manera intermitent l’hora i dos missatges de text que es poden actualitzar "al vol." també és un servidor web d'una sola pàgina que us permet canviar els dos missatges de text
Com es crea una pàgina web senzilla amb suports per a principiants: 14 passos
Com es crea una pàgina web senzilla amb claudàtors per a principiants: Introducció Les instruccions següents proporcionen una guia pas a pas per crear una pàgina web mitjançant claudàtors. Brackets és un editor de codi font amb un enfocament principal en el desenvolupament web. Creat per Adobe Systems, és programari lliure i de codi obert amb llicència
Muntatge del clon Arduino de la placa Really Bones Bones (RBBB) - ACTUALITZAT: 16 passos
Muntatge del clon Arduino Really Bare Bones Board (RBBB) - ACTUALITZAT: ACTUALITZACIÓ 16/08/2008: s’han afegit imatges de diferents configuracions de taulers en el darrer pas. El RBBB de Modern Device Company és un petit clon Arduino meravellós. Si teniu un projecte Arduino que requereix una petita petjada o una placa dedicada econòmica, això
Bare Bones Bread Breadboard Arduino Etiquetes: 4 passos
Bare Bones Bread Breadboard Arduino Etiquetes: aquest instructiu és realment senzill. Em va inspirar la interfície uDuino de ossos nus de tymm per fer un taulell de navegació amb un Arduino, però vaig pensar que faltava una cosa. Les descripcions de pins Arduino, D0, D1, A0, A2, etc., no coincideixen directament amb ATMeg