Proste kody html do szybkiego stosowania. Często, w trakcie pracy z blogiem czy portalem zachodzi potrzeba umieszczenia grafiki, linku zaszytego w grafice czy innych podobnych. Szczególnie w widgetach typu tekst na blogach. Służą temu proste kody html, nierzadko mieszczące się w jednym wierszu. Osadzanie grafiki Grafikę wstawiamy tagiem (znacznikiem) img. Jest to jeden z niewielu tagów html nieposiadający znacznika zamykającego. Zazwyczaj tagi występują parami otwierający i zamykający. <html></html> Znacznik img nie ma tagu zamykającego. <img src = > Powyżej, w tagu występuje parametr src. Jego wartość ( to, co będzie w cudzysłowie) określa adres grafiki, która ma być umieszczona na stronie. Możemy tu podać zarówno adres grafiki zapisanej na serwerze, na którym znajduje się nasza strona (blog, portal) czy też z dowolnego miejsca w internecie. <img src= http://systemymarketingowe.pl/plikownia/cpanel.png > Kod powyżej umieszcza plik grafiki Cpanel.png zapisanej w katalogu plikownia katalogu domeny systemymarketingowe.pl Efektem będzie wyświetlenie tej grafiki w miejscu wstawienia kodu.
Jak da każdego innego znacznika html, tak i dla src możemy użyć większej ilości parametrów. Parametry width="62" oraz height="47" określają szerokość i wysokość grafiki w pikselach. Oczywiście te wartości dobieramy dla każdej grafiki indywidualnie. <img src= http://systemymarketingowe.pl/plikownia/cpanel.png width="62" height="47" > Między poszczególnymi parametrami stosujemy odstęp jednej spacji. Ważnym parametrem dla grafiki jest alt. Otóż roboty wyszukiwarek internetowych nie czytają plików graficznych. Za to indeksują wartość parametru alt, jako opisu dla grafiki. alt="cpanel konta hostingowego" Stosowanie parametru alt z wartością wpływa pozytywnie na ranking naszej strony. <img src= http://systemymarketingowe.pl/plikownia/cpanel.png width="62" height="47" alt="cpanel konta hostingowego"> Jeżeli chcemy umieścić w witgecie typu html grafikę z naszego bloga, musimy wcześniej odczytać jej adres w katalogu media z zaplecza wchodzimy do biblioteki mediów. Tam klikamy na wykazie w odpowiednią grafikę.
W nowym oknie, na jego dole mamy adres grafiki. Kopiujemy i wklejamy do tagu img w widgecie. Skopiowany adres grafiki wklejamy do parametru src znacznika img. W efekcie w bocznym pasku bloga pojawia się nasza grafika. Dla odsunięcia grafiki od lewego boku bocznego paska możemy użyć reguły styli CSS style="margin-left: 30px" Obrazek odsunie się od lewej krawędzi o wartość podaną w pikselach.
Wartość oczywiście dobieramy stosownie do naszych potrzeb. Odsyłacze hiperlinki Odsyłacze, inaczej hiperlinki umieszczamy znacznikiem <a>. Znacznik a ma tag zamykający, czyli poprawnie będzie: <a></a> To, co umieścimy między znacznikami będzie wyświetlane na stronie jako tekst (anhor tekst). <a> Ciekawy materiał</a> Adres internetowy (łącze) który ma się otworzyć po kliknięciu w link, wskazujemy w wartości parametru href. href= http://prostoijasno.pl <a href= http://prostoijasno.pl >Ciekawy materiał</a> Do znacznika a możemy dodać kolejny parametr title. Jego wartość będzie wyświetlana w dymku, po najechaniu kursorem myszki na link. title="warte przeczytania"
<a href= http://prostoijasno.pl title="warte przeczytania" >Ciekawy materiał</a> Kolejnym parametrem znacznika a jest target. Brak tego parametru powoduje otwarcie adresu linku w tym samym oknie przeglądarki. Twój blog zostanie zastąpiony stroną podaną w linku. Wartość _blank powoduje otwarcie adresu linku w nowym oknie przeglądarki. target= _blank href= http://prostoijasno.pl <a href= http://prostoijasno.pl title="warte przeczytania" target= blank >Ciekawy materiał</a> Grafika może być również umieszczana w znaczniku a. Zamiast tekstu. Kliknięcie w grafikę otwiera adres docelowy linku. <a href="http://prostoijasno.pl" target="_blank"><img src="http://kurs.janzablotny.eu/wp-content/uploads/2012/09/responser.png" alt="" title="warte przeczytania" width="" height="" style="margin-left: 50px"></a>