Jump to content
MaxCheaters Official Group on Discord
-> Place your ad text here <-
We're Rebuilding – Join Our Staff Team

[Οδηγός]Html ετικέτες και πως τις χρησιμοποιείτε

Apithanos

By Apithanos
in Guides & Tutorials

 Share

Recommended Posts

Apithanos Newbie

Apithanos

Posted
Posted

                                                                    HTML

Html σημαίνει HyperText Markup Language , είναι δηλαδή μια γλώσσα που μας επιτρέπει να μορφοποιούμε καποιες πληροφορίες προκειμένου να εμφανιστούν με τον τρόπο που θέλουμε σε έναν Browser . Η HTML δεν είναι γλώσσα προγραμματισμού αλλα γλώσσα μορφοποίησης . Είναι μια περιγραφική γλώσσα , δηλαδή ένας ειδικός τρόπος γραφής κειμένου και κλήσης άλλων αρχέιων η εφαρμογών βασισμένος σε ειδικές ετικέτες (tags). Οι ετικέτες αυτές περικλείονται μέσα σε σύμβολα < και >. Οι ετικέτες περικλείουν μια πληροφορία που θέλουμε

να μορφοποιήσουμε , υπάρχει δηλαδή μια ετικέτα που δηλώνει το τέλος της μορφοποίησης είναι ιδια με την ετικέτα που δηλώνει την αρχή με την μόνη διαφορά οτι περιέχει και τον χαρακτήρα / . Η γενική μορφή μιας ετικέτας ειναι: <ετικέτα> Κείμενο </ετικέτα>

Π . χ η οδηγία για να γίνει ενα κείμενο bold ειναι: <b> το κείμενο που θα ειναι bold </b>

 

Η HTML δεν "θέτει" περιορισμούς στο αν τα γράμματα της ετικέτας θα είναι κεφαλαία η μικρά. Είναι ομώς προτιμότερο να χρησιμοποιήσουμε μικρά γραμματα,γιατι πολλές φορές τα κεφαλαία Ελληνικά "μοίαζουν" με τα κεφαλαία Αγγλικά.Μπορεί όμως οπτικά να φαίνονται ίδια όμως πρόκειται για δύο διαφορετικά με αποτέλεσμα η εντολή να μην γινει κατανοητή απο τον browser και αυτός να την αγνοεί.

Π.χ Η ετικέτα για μια επικεφαλίδα ειναι <h1> Επικεφαλίδα </h1> ,αν "ξεχαστούμε" και γραψουμε την ετικέτα με κεφαλαία ελληνικά το οπτικό αποτέλεσμα στον κώδικα θα ειναι <H1> Επικεφαλίδα </H1>. Εμείς δεν θα καταλάβουμε τη διαφορά αλλα ο browser θα την καταλάβει και θα αγνοήσει την ετικέτα.

ΔΗΜΗΙΟΥΡΓΏΝΤΑΣ ΕΝΑ HTML ΑΡΧΕΙΟ

Για να δημιουργήσουμε ενα html αρχείο θα πρέπει να χρησιμοποιήσουμε ενα απλο επεξεργαστή κειμένου.Ο επεξεργαστής που χρησιμοποιήται συνήθως ειναι το Σημειωματάριο (Notepad).Ανοίγουμε λοιπόν το σημειωματάριο και επιλέγουμε Αποθήκευση.

Επιλέγουμε σημείο αποθηκευσης και στην συνέχεια γράφουμε το όνομα που θέλουμε να δώσουμε στην ιστοσελίδα μασ και δίνουμε την κατάληξη .html ή .htm.

Μόλις δημιουργησουμε το αρχειο μας το πρώτο πραγμα που θα πρέπει να κάνουμε ειναι να γράψουμε τις βασικές εντολες της HTML τις οποίες πρέπει να περιέχει καθε HTML αρχείο.Οι εντολές χωρίζονται σε αυτές που περικλέιουν πληροφορίες που δεν εμφανίζονται στην οθονη του browser και σε αυτές που εμφανίζονται.Δηλαδή απο τις ετικέτες που ανήκουν στο κεφάλι της σελίδας και περιέχουν πληροφορίες για την σελίδα και στο σώμα που περιέχονται πληροφορίες που εμφανίζονται στην οθόνη του browser.

Όλος ο κωδικας της HTML περιέχεται μέσα στις ετικέτες <html> ... </html>. Μέσα σε αυτή περιέχονται οι ετικέτες

<head> .... </head> δηλαδή το "κέφαλι" της html και μετά η <body> .... </body> δηλαδή το "σώμα" της σελίδας

<html>

<head>

<title> Η πρώτη μου Ιστοσελίδα </title>

</head>

<body>

....................

</body>

</html>

H Ετικέτα <title> Η πρώτη μου Ιστοσελίδα </title> περιέχεται μέσα στην ετικέτα <head> .... </head> και η πληροφορίες που περιέχονται μέσα σε αυτή (<title>) εμφανίζονται στην γραμμή του browser και οχι μεσα σε αυτόν.

 

[glow=red,2,300]ΒΑΣΙΚΑ ΣΤΟΙΧΕΙΑ[/glow]

τυπος εγγράφου <HTML> </HTML> Ορίζει την αρχή και το τελος

τιτλος <TITLE> </TITLE> εμφανίζεται στην μπλέ μπαρα του browser μπενει μεταξυ <HEAD> </HEAD>

επιφυλλίδα <HEAD> </HEAD> Εδω μπαίνει ο τιτλος της σελίδας τα styles και η java

βασικός κορμος <BODY> </BODY> το κύριο υλικό της σελίδας

[glow=red,2,300]ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ[/glow]

Εντονη γραφη <B> </B>

πλακια γραφη <I> </I>

υπογραμμιση <U> </U>

επικεφαλιδα <HI> </HI> δεχεται 6 ορισμους:Η1 ως και Η6.Δημιουργει διαφορετικου μεγέθους χαρακτήρες

εντονη εμφαση <STRONG> </STRONG>

μεγαλα γραμματα <BIG> </BIG>

μικρα γραμματα <SMALL> </SMALL>

διαγραφη <STRIKE> </STRIKE>

εκθέτης <SUP> </SUP>

δείκτης <SUB> </SUB>

γραφομηχανή <TT> </TT>

προμορφοιποημένο <PRE> </PRE> εμφανίζει τα κένα διαστήματα οπως εχουν γραφεί

στοίχη στο κέντρο <CENTER> </CENTER>

μεγεθος γραμμάτων <FONT SIZE=i> </FONT> με τιμές i απο 1 ως και 7

χρώμα γραμμάτων <FONT COLOR="#$$$$$$"> </FONT> το χρώμα ορίζεται με τρέις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα τ.

επιλογή γραμματοσειρας <FONT FACE="ονομα γραμματοσειράς"> </FONT>

κινούμενο σχέδιο <MARQUEE> </MARQUEE>

[glow=red,2,300]ΔΙΑΧΩΡΙΣΤΕΣ[/glow]

παραγραφος <P>

στοίχηση παραγράφου <P ALIGN=LEFT | CENTER | RIGHT> </P>

πλήρης στοίχηση παραγραφου <P ALIGN=JUSTIFY> </P>

αλλαγή σειράς <BR>

οριζόντια γραμμή <HR>

χρώμμα γραμμης <HR COLOR="#$$$$$$"> το χρώμα ορίζεται με τρέις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα του.

στοίχηση γραμμης <HR ALIGN=LEFT | RIGHT | CENTER>

πάχος γραμμης <HR SIZE=i> Σε Pixels

πλατος γραμμης <HR WIDTH=i> Σε Pixels

πλάτος γραμμης <HR WIDTH="%"> Ως ποσοστό του πλάτους σελίδας

συμπαγής γραμμή <HR NOSHADE> Διχως την τριδιαστατη οψη

[glow=red,2,300]ΦΟΝΤΟ ΚΑΙ ΧΡΩΜΑΤΑ[/glow]

Επαναλαμβανομενη εικόνα φοντου <BODY BACKGROUND="Διαδρομή αρχείου εικόνας">

υδατογράφημα <BODY BGPROPERTIES="FIXED">

χρωμα φοντου <BODY BGCOLOR="#$$$$$$">  το χρώμα ορίζεται με τρέις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα του.

βασικό χρωμα κειμένου <BODY TEXT="#$$$$$$"> το χρώμα ορίζεται με τρέις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα τ.

χρώμα συνδέσμων <BODY LINK="#$$$$$$"> το χρώμα ορίζεται με τρέις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα του.

χρώμα συνδέσμων που έχουμε επισκεφτεί <BODY VLINK="#$$$$$$"> -//-

ενεργός συνδεσμος <BODY ALINK="#$$$$$$> το χρώμα ορίζεται με τρέις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα του.

[glow=red,2,300]ΛΙΣΤΕΣ[/glow]

Απλή λιστα <UL> <LI> <LI>....<LI> </UL> ΤΟ <LI> μπαίνει μπροστά απο κάθε στοιχείο της λίστας

τύπος κουκίδας <UL TYPE=DISC | CIRCLE | SQUARE> για όλη τη λιστα

τύπος κουκίδας <LI TYPE=DISC | CIRCLE | SQUARE> για το συγκεκριμένο στοιχείο της λίστας

αριθμιμένη λιστα <OL> <LI> <LI>...<LI> </OL> ΤΟ <LI> μπαίνει μπροστά απο κάθε στοιχείο της λίστας

μορφή αρίθμησης <OL TYPE=A|a|I|i|1> για όλη τη λιστα

μορφή αρίθμησης <LI TYPE=A|a|I|i|1> για το συγκεκριμένο στοιχείο της λίστας

αριθμός έναρξης αρίθμησης <OL START=αριρμός> για όλη τη λιστα

λιστα επεξηγήσεων <DL> <DT> <DD> <DT> <DD> ... <DT> <DD> </DL> (<DT>=όρος, <DD>=Επεξήγηση)

[glow=red,2,300]ΓΡΑΦΙΚΑ ΚΑΙ ΗΧΟΣ[/glow]

Εμφανιση εικόνας <IMG SRC="Διαδρομη αρχείου εικόνας>

στοιχηση εικονας <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

στοιχηση εικονας  με το κειμενο <IMG SRC="διαδρομη αρχέιου εικόνας" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>

εναλλακτικο κειμενο αντι της εικονας <IMG SRC="διαδρομη αρχέιου εικόνας"ALT="Κειμενο"> Αν η εικόνα δεν εμφανιστει

διστασεις εικονας <IMG SRC="διαδρομη αρχέιου εικόνας"WIDTH=Αριθμός HEIGHT=Αριθμ (μπορουμε κ σε %)> Ως  διαστασεων Σελ.

πλαισιο εικονας <IMG SRC="διαδρομη αρχέιου εικόνας"BORDER=Αριθμός> Σε Pixels

κενος χωρος γυρω απο την εικονα <IMG SRC="διαδρομη αρχέιου εικόνας"HSPACE=Αριθμός VSPACE=Αριθμός> Σε Pixels

ηχος <BGSOUND SRC="διαδρομη αρχέιου ηχου" LOOP=Αριθμός> μπαινει μεταξυ <Head> και </Head>. Loop -1 Συνεχώς

ανανεωση περιεχομενου αυτοματα* <META HTTP-EQUIV="Refresh" CONTENT"χρονος σε δευτερολεπτα; URL=ονομασια σελίδας">

 

Αυτό ηταν ο Οδηγός ειναι 100% Δικος μου. μου πηρε περιπου μια μερα να το γραψω.

Ελπιζω να βοηθηση καπως για οτι καινουργιο μαθαινω θα κανω UPDATE κάθε μερα.

Ευχαριστώ πολυ.

 

  • 8 months later...
Apithanos Newbie

Apithanos

Posted
  • Author
Posted

εδώ είμαστε για ελληνικά! :)

Apithanos Newbie

Apithanos

Posted
  • Author
Posted

kai ta 2 einia  poli akla... alla kaneis den dixnei to apotelesma... dld pws  8a fenete...

 

tecpa tnx

auto tha fanei apo to styl sou!, pws tha to kaneis, allwste den sas lew pws na kanete to diko sas site, sas dinw apla tous kwdikes gia na ta dimiourgisete monoi sas :)

Thnx dude :P

thnx >:D

Apithanos Newbie

Apithanos

Posted
  • Author
Posted

gj...btw ginete na kaneis k me php an gnorizis?ty

den 3erw me php :/

auta ta ematha sto sxoleio, kai ta egrapsa se post :)

  • 4 weeks later...
HellRanger Newbie

HellRanger

Posted
Posted

Φίλε μου πολύ καλό, είχα κάποιες απορίες πάνω στην html τώρα νομίζω πως θα τις διελευκάνω!

Θα κοιτάξω και αυτά εδώ..

Ευχαριστώ!

Apithanos Newbie

Apithanos

Posted
  • Author
Posted

Φίλε μου πολύ καλό, είχα κάποιες απορίες πάνω στην html τώρα νομίζω πως θα τις διελευκάνω!

Θα κοιτάξω και αυτά εδώ..Ευχαριστώ!

ότι πρόβλημα έχεις, μην διστάσεις, κανε ποστ :)

επίσης μπορείς να χρησιμοποιήσεις microsoft frontpage 2003, για coding, δες βιντεο στο youtube..

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing


  • Posts

    • Tryskell
      How to start learning Java using Lineage 2 as an example?

      By Tryskell · Posted

      Offtopic, personal attacks, probably too old to use that much memes and what's YOUR actual contribution to L2J, in order I laugh aswell ?   The main poster quotes my pack so I answer accordingly, while you advertise L2JFrozen in both of your posts - discontinued since 2011, with none taking back the open source lead while anyone could.   If you're somewhat affiliated to hopzone, you probably packed way more money than me. Packs don't make any type of money (barely 100e/month) and if you would follow me, you would know there are ways to handle it or even getting paid.   Hope I was short enough, 🧂🤡.
    • byPain
      [SHARE] Beatiful Landing page for ur lineage 2 project

      By byPain · Posted

      Hi guys, this is a CMS im sharing for lineage 2 servers, im tired of the crap i see on new release servers. Dont let me start on the IA developed ones lmao.   📋 Description Free and open source template to create landing pages for Lineage 2 private servers. Designed with a dark fantasy theme and modern animations. ✨ Current Features This FREE version includes: Complete Landing Page - Professional design ready to use Multi-language Support - Spanish, English, Portuguese Dark Fantasy Theme - With animated UI elements Server Information - Rates, features, and rules Olympiad Ranking - Rankings display Download Section - For game client Skins and Animations Gallery Streaming Widget - Twitch/Kick integration Fully Customizable - Via configuration files ❌ Not Included in Free Version ❌ User Registration System ❌ Online Players Counter ❌ Donation Panel 💎 Premium Integrations IntegrationPrice Registration System $50 USD Online Players Counter $50 USD Donation Panel $50 USD   📧 Contact: https://gh0tstudio.com 🛠️ Tech Stack Technology    Version    Description React              19.2.0       UI Library TypeScript       5.8.2        Static typing Vite                 6.2.0         Build tool TailwindCSS   CDNCSS    Framework Lucide React   0.554.0         Icons i18next           23.16.0       Internationalization react-i18next   15.1.0        React bindings for i18n All documentation provided for AI AGENTS to make changes on the ui texts and so on. u can have a look on the cms fully working with donation panel, online count and register via: https://crmlineage2.vercel.app/ https://github.com/6h0T/CRM-LINEAGE2-FREE If u are in the lookings to develop a unique website for ur projects, u can dm me or contact me throw my socials on my profile. all code has encrypted references so any type of rebranding, copying or selling without authorization will result in take downs
    • byPain
      [WTB] L2 website + account panel + donate panel

      By byPain · Posted

      Hello dude, i can help u out, i reached to u via DM, my studio is https://gh0tstudio.com i have worked with almost 40 brands on developing Private Lineage and Mu online servers, dashboard for vote pages and more. I sent u some examples too
    • protoftw
      Graphic/Html Designs - Protojah

      By protoftw · Posted

      L2 TARTARUS - HTML DESIGN       L2 KOMBAT - ANIMATED BORDER   L2 SERENITY - ANIMATED LOGO   L2 ARCANE - COMMUNITY BOARD     L2 AMERIKA - ADVERTISING BANNER   L2 ZERON - ADVERTISING BANNER  
    • SocNet
      SOCNET BOOST 是所有社交媒体营销（SMM）平台中的新解决方案 | 社交媒体与网络流量

      By SocNet · Posted

      SOCNET — 生日快乐！ 感谢您一直陪伴我们！ 为期一周的礼物、奖励和折扣盛宴！ 今天我们庆祝SOCNET项目的生日——而礼物属于您！ 我们为所有服务准备了超强优惠： ⭐ SOCNET STORE — 商店 (网站/Telegram) 1. 优惠码BIRTHDAY — 20%折扣 可用于购买任何商品！ 2. 大额购买礼品 在任意商品上消费$200，即可任选一件价值不超过$10的商品——免费赠送！ 3. 在我们商店主题帖中发表评论可获赠余额 "Happy Birthday, SOCNET. My username/email is"：BHW、BFD、voided、nulled 和 patched 论坛。 ➡ 1个论坛 = $1余额！ 通过下方提供的联系方式将帖子截图发送给客服，附上您的登录名/邮箱，即可领取奖励。 ⭐ SOCNET SMM 面板 1. 充值 = 奖励 充值$100并获得+$5余额。 充值后请在面板内创建工单。 2. 在我们的 SMM 面板主题帖中发表评论可获赠余额 "Happy Birthday, SOCNET. My username/email is"：BHW、BFD、voided、nulled 和 patched 论坛。 ➡ 1个论坛 = $1余额！ 通过下方提供的联系方式将帖子截图发送给客服，附上您的登录名/邮箱，即可领取奖励。 ⭐SOCNET STARS — Telegram Stars/Premium 购买机器人 1. 大额购买 = 巨额奖励 单笔购买>1000 Stars，即可获赠+100 Stars！ 购买后请联系支持。 2. 在我们 Stars 购买机器人的主题帖中发表评论可获赠余额 "Happy Birthday, SOCNET. My username/email is"：BHW、BFD、voided、nulled 和 patched 论坛。 发表评论： ➡ 1个论坛 = +50 Stars余额！ 通过下方提供的联系方式将帖子截图发送给客服，附上您的登录名/邮箱，即可领取奖励。 ⭐SOCNET SMS 虚拟号码服务 1. 充值赠送奖励 充值$50即可获赠+$10。 充值后只需联系支持即可。 2. 在我们的 SMS 服务主题帖中发表评论可获赠余额 "Happy Birthday, SOCNET. My username/email is"：BHW、BFD、voided、nulled 和 patched 论坛。 ➡ 1个论坛 = $1余额！ 通过下方提供的联系方式将帖子截图发送给客服，附上您的登录名/邮箱，即可领取奖励。 让我们一起庆祝吧！ 活动有效期为2025年12月02日至12月07日（含）。 不要错过——这是全年最优惠的条件！ 新闻： ➡ Telegram 频道: https://t.me/accsforyou_shop ➡ WhatsApp 频道: https://chat.whatsapp.com/K8rBy500nA73z27PxgaJUw?mode=ems_copy_t ➡ Discord 服务器: https://discord.gg/y9AStFFsrh 联系方式 & 支持： ➡ Telegram: https://t.me/socnet_support ➡ WhatsApp: https://wa.me/79051904467 ➡ Discord: socnet_support ➡ ✉ Email: solomonbog@socnet.store

  • Topics

×
×
  • Create New...

AdBlock Extension Detected!

Our website is made possible by displaying online advertisements to our members.

Please disable AdBlock browser extension first, to be able to use our community.

I've Disabled AdBlock