Olá pessoal! Meu nome é Isabella Castiglioni, é a minha primeira vez aqui e irei me apresentar após o Leia Mais. Hoje venho postar nesse bloguinho lindo, espero que gostem de mim ^^. A postagem vai ser só a primeira parte de um guia sobre HTML e CSS, nele vou disponibilizar códigos como para títulos e menus, mas as minhas postagens aqui vão ser um pouco diferente das de blogs de tutoriais, não vou só mostrar o código, vou ensiná-los como vocês mesmos vão fazer eles nos seus layouts. Espero que gostem, para continuar clique no leia mais:
Sobre mim, como posso começar? Bem, eu amo qualquer tipo de rock, heavy metal, rock clássico, jazz, blues, indie, folk, indie rock, indie pop, pop, eletrônica, culturas estrangeiras, história geral, Egito, Grécia, Roma, Mesopotâmia, tudo que se relaciona ao início do mundo, do Universo, ao Big Bang e outras religiões, mitologia grega, romana, egípcia, nórdica (embora seja católica), pop, amo geografia e principalmente, geologia ♥ Sou bem louca, embora um pouco tímida, amo As Crônicas de Nárnia (especialmente o Cavalo e Seu Menino e a Cadeira de Prata!), amo escrever e ler, sou potterhead (fã da Harry Potter e sou da casa Sonserina), muito fã de Percy Jackson e Heróis do Olimpo (semideusa romana filha de Marte, mas que ama os gregos!), tributo (Jogos Vorazes) do distrito 4, amo a água, mitos (ou não) como sereias e fadas, beatlemaníaca e amo muito Lorde, Arctic Monkeys, Linkin Park, Maroon 5, Coldplay, Demi Lovato, Selena Gomez, estou tentando escrever um livro. Sou blogueira desde 2010 (com os meus blogs vergonhosos sobre Barbie, kkkkkkkkkkkkkk), em 2012/13 comecei a postar goodies após viciar nas c-boxes da vida (ou do KW). Atualmente, meu blog é pessoal e é o Miss Rock; Bem, essa introdução ficou meio grandinha (meio, Isabella?), espero que leiam e gostem de mim e da postagem!
HTML no Blogger
HTML é uma linguagem-mãe de programação com códigos.
Não sou formada nisso nem nada, mas já li uma apostila sobre xhtml, html e css. (A propósito, esses termos podem ser escritos todos em letra maiúscula, em letra minúscula, letra capital em maiúscula, qualquer forma é certa). Ao contrário do que muitos pensam, a linguagem mãe no Blogger é o Xhtml. É uma espécie de HTML com o XML, uma linguagem codificada de comunicação, e é o que permite que a gente poste no blog, comente. De começo, tudo parece um bicho de sete cabeças, mas não é.
Se você quiser, crie um blog de testes e coloque no modelo que quiser, eu recomendo o Simples ou o Travel/Viagem Branco (aquele do avião branco com fundo azul), que são mais fáceis de mexer. Nele, vai vendo as seguintes coisas:
DOCTYPE
Vá em Modelo, Editar HTML e verá logo de cara o seguinte código:
"<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>"
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>"
Isso é uma parte de código encontrada sempre no começo de um código-fonte de HTML (exceto se a pessoa quiser puro, sem efeitos). Ela se chama <!DOCTYPE> e dependendo do objetivo do site, apresentação ou o que mais envolver um código-fonte html, ele varia. Mas qual a real função do Doctype? Com o aparecimento da internet, muitos tentaram "normatizar" o HTML nos sites e tudo mais através do World Wide Web Consortium (W3C), fundado pelo inventor do HTML, Tim Berners-Lee. A Netscape vendia navegadores, enquanto a Microsoft ignorava a internet. Como tinha quase 90% das vendas, por que a Netscape se preocuparia em atualizar as normas de HTML? Nessa época, a linguagem estava nas versões 2.0, 3.2... A Netscape só se interessava em fazer seus próprios elementos de marcação que não funcionava em outros navegadores. Aí a Microsoft decidiu dar atenção à novidade da Internet e competir com a Netscape, lançando o Internet Explorer, o navegador que conhecemos muito bem por sua lerdeza. Sua primeira versão não era melhor em suporte das normas de HTML que a Netscape. Mas aí a Microsoft resolveu dar de brinde o Internet E. junto com seu Sistema Operacional Windows, e ficou muito mais popular \o/. Então, a partir das versões 4 e 5 do HTML eram muito melhores adaptadas que a Netscape, enquanto essa nem queria atualizar mais, ficando com a velha norma/versão 4 no mercado! E o que isso tem a ver com doctype? Este, que significa Document Type Definition, "tipo de definição do documento", faz jus ao nome. Quando você codifica com as normas atuais do W3C, você está fazendo algo de visualização para todos os navegadores atuais e do futuro. O XHTML é a mais nova versão ;) Resumindo, com o doctype é uma forma de informar ao navegador que você está usando certo modelo do HTML e deve ser inscrito sempre no início do documento. No caso do XHTML, você tem que acrescentar os atributos xmlns (XML-Name-Space) e lang, que nesse caso é o idioma humano e no nosso caso é pt-br (português brasileiro), é só colocar:
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
As abreviaturas de todos os idiomas do mundo estão nas ISO 639 standard language codes (aqui).
Aqui no Blogger você tem que usar esse código que você vê de cara lá, mas caso você queira testar por exemplo em algum site de editor de html, como este (clique), eis os códigos que precisa: W3Schools CommonDOCTYPE Declarations (aqui), que informa desde o doctype da versão 4 ao XHTML.
Se você quiser criar seu layout no Blogger e fazer todos os códigos, utilize o padrão, que é:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
,como já dito.
Ei, se você não sabe personalizar ou localizar os códigos muito ou apenas sabe personalizar, mas não "mexer" no layout, não esquente! Todos somos assim, ninguém nasceu falando html pelas ruas. Eu aprendi na marra, com a ajuda de mexer no dia-a-dia com tutoriais que eu via. Antigamente não era eu que fazia os meus layouts, eram os outros blogs de goodies que davam os códigos e eu colava, só isso. Foi ao ler esses códigos que eu fui aprendendo, pouco a pouco!
No próximo post da série Guia de Personalização, menus e postagens!
Beijos de morango, Isabella >3<
Annyeong Isabella, seja bem vinda! Sou afiliada daqui só que fiquei um tempo sem comentar porquê mudei de perfil e esqueci de seguir de novo aqui ai não apareceu no meu feed açskajslas ~você não tem nada a ver com isso, ta.
ResponderExcluirEnfim, você é muito fofa, socorro, que linda açdjasdksjdla (tenho que parar com esse risada, é estranho eu sei). Você é bem eclética, ein? Sou assim também, curto tudo. Você é semideusa? *oooooo*, meu Deus, me abraça aqui. Sou semideusa romana também <33, porém costumo utilizar o aspecto grego porquê todo mundo tá acostumado e quando falo pelo romano fica todo mundo "wtf?!" embora eu saiba os nomes dos deuses tanto em romano tanto em grego. Sou caçadora, seguidora de Diana ♥♥♥.
Então, eu nunca pesquisei sobre isso e nunca vi tutoriais sobre o assunto, foi uma ótima postagem e é bem legal saber mais um pouquinho sobre, adorei *o*
Abraços,
Cherry Pump ~ Porto do Amor
Annyeong Haseyo, Thay, muito obrigada! Fico feliz em conhecer os afiliados e leitores aqui desse bloguinho lindo ♥
ExcluirVocê acha? Own, que amorzinho *---* Eu curto de tudo um pouco também, só odeio funk, sertanejo, políticos e patriotas pela sua república, mas claro, respeito ^^ OMG, semideusa romana! Tenho pouquííísimas amigas romanas, a maioria (só uma que não) virtual. Sou apaixonada por ambas mitologias e sei vários nomes das duas versões também, geralmente eu falo grego pois ninguém entende os nomes em latim também ~corre
Eu virei semideusa romana por HDO, mas antes disso eu já preferia faz muito tempo Roma do que Grécia, inclusive, quando eu tinha meus 4/5 anos eu gostava de pedir ajuda para repetir nomes da "ordem" e eu ficava falando assim: Dinossauros, homens das cavernas, romano de toga branca e tiara de hortelã com harpa (~corre²), idade do Robin Hood (~corre³), internet, yashashyayshahs. Só fui saber mais sobre a Grécia quando eu tinha meus 6/7 anos e comecei a me interessar, embora eu tenha visto o filme de Ladrão de Raios em 2010, só comecei a ler a saga ano passado :3 Prosseguindo, pelo menos eu só comecei com esse negócio de semideusa após ler Percy Jackson, mesmo já conhecendo mitologia e amando. Então, eu falava que era grega, Rick não tinha nem criado direito os romanos ainda (pelo menos para mim que não haviam lido HDO ainda). Depois que eu li, vi que ele tinha criado um universo de mitologia, mas mitologia romana ♥ ♥ ♥ Antes disso, eu era filha de Atena, caçadora de Ártemis, mas Minerva não tem filho e eu sou devota à Diana agora u.u
Nossa, me surpreendi que tenha gostado, pois esse é um dos assuntos mais chatinhos do HTML, mas eu gosto e é super importante, muitas blogueiras vão lá achando que é só colocar -html--head--/head--/html- (não coloquei com < e > pois o comentário não envia assim) que resolve todo um layout e acabam tirando o Doctype, achando que está de enfeite, fazendo que dê errado em muitos navegadores e bugue tudo no servidor do Blogger. Hoje eu iria fazer mais coisas, mas foi tudo muito corrido, eu ia colocar atributos e personalização de menus também, infelizmente não consegui pois sou muito detalhista e iria demorar tanto!
Seus blogs são uns amorzinhos >3<
Abraços, kyah >3<
OOOOOOOOOOOOI, Isa! Boa tarde, haha! Tudo bom? Espero que sim! ♥ Seja maaaaaaaaais que bem-vinda a este bloguinho lindoooooooo! Sabe que eu gostei de você, e especialmente desse seu comentário acima? Haha, a maioria das blogueiras sente preguiça de responder os comentários e realizar um grande como o seu, admiro muuuito isso! E eu gostei de você, sim, viu? Haha, muuuito fofa! ♥ Eu conheço você, uashuashusuah! Me conhece? Acho que não, né? Sou do Nescau com Nutella =) ENFIIIIIIIM! Haha, nossa, você é potterhead, semideusa e esse monte de coisa? Uauahsuhasuhas, meu Deus! E é de Sonserina? Awn, uashuahsusha! Quantos anos você tem? Não falou na introdução, uashuashuhs! Mas tudo bem, <3 Gostei muito de você e da sua apresentação! :3 SEJA BEM-VINDA!
ResponderExcluirCaraca! Se não fosse por você, eu não saberia essa parte do Html com o Xml! Quem diria que é o que nos permite comentar, uashuahuahs! Nem sabia disto! Também não sou formada no assunto, mas sei até que bastante coisa! Só esse detalhezinho que eu não sabia, hahahaha! Foi muuuuuuuito bom saber! =) As demais coisas, como o DocType, eu aprendi sozinha mesmo, mexendo normalmente no Html, haha! Mas me foi muuuuuito útil e sei que também será para a maioria dos leitores que conferirem seu post! ♥
Um enoooooorme e grande beijo,
Juu-Chan || Nescau com Nutella
OOOOOOOOI, Jubs-unnie (se é que me permite vos chamar assim), bom dia >3< Unnie pois eu tenho 11 e você tem 13 ou 14, não? Eu já vos conhecia também, acho que me conhece da época do Caprichos de Garotas e Efeito Vintage, não? Eu lembro que conheci o NCN quando ele foi criado, aquele layout estilo revista amarelo, rosa e cinzinha claro divo ♥ Foi ele quem me inspirou a fazer o Efeito Vintage (em layout estilo revista também) e sempre quis ter mais seguidores no CG para afiliar, mas nunca tive bastante, então, agora que o ALF/ALAF é, simplesmente surtei! Own, muito obrigada! Kyah, você é muito fofa também <3
ExcluirEu adoro responder comentários, respondendo parte por parte do que as pessoas falaram... E comentar e retribuir, então? Acho que às vezes deixo os donos do blog meio bravos, pois eu comento umas 20 linhas HSUAHSUAHSUAHSUAH'
Eu só tenho preguiça de me apresentar, são muitos fandoms! Sempre acabo esquecendo algum detalhe, como minha idade e muitos outros que esqueci também! Enfim, muito obrigada! :3
Alguém já havia me falado que o Blogger não aceita o HTML5 puro e sim XHTML. Eu fiquei tipo: "OMG, eu não sabia disso! OMG! Oh well, que diabos é isso?" e aí que procurei uma apostila de XHTML, HTML e CSS e acabei sabendo o Doctype, embora muitos capítulos antes de saber sobre isso, no começo da apostila, decidi criar um blog de testes, apagar tudo e fazer tipo isso: -html- -head- -title- Teste -/title- -/head- -/html (novamente, não coloquei o > e < pois o comentário buga). E, obviamente, bugou tudo, deu erro e tals. Então decidi tirar parte por parte do HTML, e mesmo que tenha demorado, ajudou eu a compreender certas partes (inclusive Doctype e aquela enorme parte do Variables Definitions, que muita gente já sabe, mas mesmo assim quero fazer um post sobre isso!) e o que acontece se nós tirarmos. Fico feliz que tenha gostado ^^
Outro enooooooooooooooorme e grande beijo, Isabella!