వెబ్‌సైట్ ఎలా తయారు చేయాలి: ప్రారంభకులకు

మీరు ఎల్లప్పుడూ వెబ్‌సైట్ చేయాలనుకుంటున్నారా? బహుశా మీరు మా HTML లో కొంత చదివి ఉండవచ్చు ( HTML అర్థం ) మరియు CSS ట్యుటోరియల్స్, కానీ ఒక పెద్ద ప్రాజెక్ట్‌లో ఆ భాషలను ఎలా ఉపయోగించాలో తెలియదు.

మొదటి నుండి పూర్తి వెబ్‌సైట్‌ను తయారు చేసే ప్రక్రియ ద్వారా ఈ రోజు నేను మీకు మార్గనిర్దేశం చేస్తాను. ఇది కష్టమైన పని అనిపిస్తే చింతించకండి, నేను మీకు అడుగడుగునా మార్గనిర్దేశం చేస్తాను.

---

---

మీరు ఈ వెబ్‌సైట్‌ను HTML, CSS మరియు JavaScript ఉపయోగించి j క్వెరీ (j క్వెరీకి గైడ్) టచ్‌తో ఉత్పత్తి చేస్తారు. మీరు ఏమీ చేయరు నిజంగా రక్తస్రావం అంచు, కాబట్టి ఈ కోడ్ చాలా ఆధునిక బ్రౌజర్‌లలో బాగా పని చేయాలి.

మీకు ఏదైనా CSS గురించి ఖచ్చితంగా తెలియకపోతే, దాన్ని చూడండి CSS గైడ్ వద్ద W3Schools.com .

డిజైన్

ఈ వెబ్‌సైట్ కోసం డిజైన్ ఇక్కడ ఉంది. మీకు మెరుగైన లుక్ కావాలనుకుంటే, లేదా మరింత మెరుగ్గా ఉన్నట్లయితే, పూర్తి రిజల్యూషన్ ఇమేజ్‌ను చూడండి, పూర్తి ప్రాజెక్ట్‌ను ఇక్కడ డౌన్‌లోడ్ చేయండి.

నేను ఈ వెబ్‌సైట్‌ను కల్పిత కంపెనీ కోసం రూపొందించాను అడోబీ ఫోటోషాప్ 2017. మీకు ఆసక్తి ఉంటే, బండిల్ డౌన్‌లోడ్ నుండి .PSD ఫైల్‌ని మీరు పట్టుకున్నారని నిర్ధారించుకోండి. ఫోటోషాప్ ఫైల్‌లో మీరు పొందుతున్నది ఇక్కడ ఉంది:

PSD లోపల, మీరు అన్ని పొరలను సమూహం చేసి, పేరు పెట్టారు మరియు రంగు కోడ్ చేయబడ్డారు:

---

---

విషయాలు సరిగ్గా కనిపించడానికి మీకు కొన్ని ఫాంట్‌లు ఇన్‌స్టాల్ చేయాలి. మొదటిది ఫాంట్ అద్భుతం , అన్ని చిహ్నాల కోసం ఉపయోగించబడుతుంది. మిగిలిన రెండు ఫాంట్‌లు PT సెరిఫ్ మరియు అనేక ప్రో (ఫోటోషాప్‌తో సహా). ఫాంట్‌లను ఎలా ఇన్‌స్టాల్ చేయాలో మీకు తెలియకపోతే, మా గైడ్ చదవండి.

మీకు లేకపోతే చింతించకండి అడోబీ ఫోటోషాప్ , కొనసాగడానికి మీకు ఇది అవసరం లేదు.

---

---

ప్రారంభ కోడ్

ఇప్పుడు డిజైన్ స్పష్టంగా ఉంది, కోడింగ్ ప్రారంభిద్దాం! మీకు ఇష్టమైన టెక్స్ట్ ఎడిటర్‌లో కొత్త ఫైల్‌ను సృష్టించండి (నేను ఉపయోగిస్తున్నాను ఉత్కృష్ట వచనం 3 ). దీన్ని ఇలా సేవ్ చేయండి index.html . మీరు దీన్ని మీకు నచ్చిన ఏదైనా కాల్ చేయవచ్చు, అనేక పేజీలు ఇండెక్స్ అని పిలవబడటానికి కారణం వెబ్ సర్వర్లు పనిచేసే విధానం. మెజారిటీ సర్వర్‌ల కోసం డిఫాల్ట్ కాన్ఫిగరేషన్ అనేది ఏ పేజీ పేర్కొనబడకపోతే index.html పేజీని అందించడం.

మీరు వివరాలను తెలుసుకోవాలనుకుంటే, డౌన్‌లోడ్ నుండి పూర్తి కోడ్‌ని పట్టుకోండి.

మీకు అవసరమైన కోడ్ ఇక్కడ ఉంది:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */




ఇది అనేక పనులు చేస్తుంది:

• అవసరమైన కనీస HTML ని నిర్వచిస్తుంది.
• 'నాయిస్ మీడియా' యొక్క పేజీ శీర్షికను నిర్వచిస్తుంది
• Google CDN లో హోస్ట్ చేయబడిన j క్వెరీని కలిగి ఉంటుంది (CDN అంటే ఏమిటి).
• గూగుల్ CDN లో హోస్ట్ చేసిన ఫాంట్ అద్భుతాన్ని కలిగి ఉంటుంది.
• A ని నిర్వచిస్తుంది శైలి మీ CSS వ్రాయడానికి ట్యాగ్ చేయండి.
• A ని నిర్వచిస్తుంది స్క్రిప్ట్ మీ జావాస్క్రిప్ట్ రాయడానికి ట్యాగ్ చేయండి.

మీ ఫైల్‌ను మళ్లీ సేవ్ చేసి, దాన్ని మీ వెబ్ బ్రౌజర్‌లో తెరవండి. మీరు బహుశా పెద్దగా గమనించలేరు మరియు ఇది ఖచ్చితంగా ఇంకా వెబ్‌సైట్ లాగా కనిపించదు.

పేజీ శీర్షిక ఎలా ఉందో గమనించండి నాయిస్ మీడియా . ఇది లోపల టెక్స్ట్ ద్వారా నిర్వచించబడింది శీర్షిక ట్యాగ్. ఈ ఉంది లోపల ఉండాలి తల టాగ్లు.

విండోస్ 10 స్లీప్ సెట్టింగులు పని చేయడం లేదు

హెడర్

శీర్షికను సృష్టిద్దాం. ఇది ఎలా ఉంటుందో ఇక్కడ ఉంది:

ఎగువన ఉన్న చిన్న బూడిద బిట్‌తో ప్రారంభిద్దాం. ఇది లేత బూడిదరంగు కింద కొద్దిగా ముదురు బూడిద రంగుతో ఉంటుంది. ఇక్కడ క్లోజప్ ఉంది:

లోపల ఈ HTML ని జోడించండి శరీరం ఎగువన ట్యాగ్ చేయండి:

మీరు ఇక్కడ ఉన్నప్పుడు, దీనిని విచ్ఛిన్నం చేద్దాం. ఎ div ఇతర అంశాలను ఉంచడానికి ఒక కంటైనర్ లాంటిది. ఈ 'ఇతర అంశాలు' మరిన్ని కంటైనర్లు, టెక్స్ట్, ఇమేజ్‌లు, నిజంగా ఏదైనా కావచ్చు. కొన్ని ట్యాగ్‌లలోకి వెళ్లడానికి కొన్ని పరిమితులు ఉన్నాయి, కానీ డివిలు చాలా సాధారణ విషయాలు. దీనికి ఒక ఉంది id యొక్క టాప్-బార్ . ఇది CSS తో స్టైల్ చేయడానికి మరియు అవసరమైతే జావాస్క్రిప్ట్‌తో టార్గెట్ చేయడానికి ఇది ఉపయోగించబడుతుంది. మీరు ఒక నిర్దిష్ట ఐడితో ఒక మూలకాన్ని మాత్రమే కలిగి ఉన్నారని నిర్ధారించుకోండి - అవి ప్రత్యేకంగా ఉండాలి. బహుళ మూలకాలు ఒకే పేరు కలిగి ఉండాలని మీరు కోరుకుంటే, a ని ఉపయోగించండి తరగతి బదులుగా - దీని కోసం వారు రూపొందించబడ్డారు! మీరు స్టైల్ చేయాల్సిన CSS ఇక్కడ ఉంది (మీ లోపల ఎగువన ఉంచండి శైలి ట్యాగ్):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

పేరుకు ముందు హాష్ గుర్తు (#, హ్యాష్‌ట్యాగ్, పౌండ్ సైన్) ఎలా ఉపయోగించబడుతుందో గమనించండి. దీని అర్థం మూలకం ఒక ID. మీరు ఒక క్లాస్‌ని ఉపయోగిస్తుంటే, బదులుగా మీరు ఫుల్ స్టాప్ (.) ని ఉపయోగిస్తారు. ది html మరియు శరీరం ట్యాగ్‌లు వాటి పాడింగ్ మరియు మార్జిన్ సున్నాకి సెట్ చేయబడ్డాయి. ఇది అవాంఛిత అంతరాల సమస్యలను నివారిస్తుంది.

లోగో మరియు నవ్‌బార్‌కి వెళ్లడానికి ఇది సమయం. మీరు ప్రారంభించడానికి ముందు, ఈ కంటెంట్‌ను ఉంచడానికి మీకు ఒక కంటైనర్ అవసరం. దీనిని ఒక క్లాస్‌గా చేద్దాం (కాబట్టి మీరు దీన్ని తర్వాత మళ్లీ ఉపయోగించవచ్చు), అలాగే కాదు ప్రతిస్పందించే వెబ్‌సైట్, దీన్ని 900 పిక్సెల్‌ల వెడల్పుగా చేయండి.

HTML:




CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

మీరు కోడ్ పూర్తి చేసే వరకు ఏమి జరుగుతుందో చెప్పడం కష్టంగా ఉంటుంది, కాబట్టి ఏమి జరుగుతుందో చూడటానికి (తాత్కాలిక) రంగు నేపథ్యాన్ని జోడించడం సహాయకరంగా ఉంటుంది:

background: red;

లోగోను సృష్టించే సమయం వచ్చింది. ఫాంట్ అద్భుతం ఐకాన్ కోసం కూడా అవసరం. ఫాంట్ అద్భుతం అనేది వెక్టర్ ఫాంట్‌గా ప్యాక్ చేయబడిన చిహ్నాల సమితి - అద్భుతం! పైన ఉన్న ప్రారంభ కోడ్ ఇప్పటికే సెటప్ ఫాంట్ అద్భుతంగా ఉంది, కాబట్టి ఇది అన్నింటికీ సిద్ధంగా ఉంది!

ఈ HTML ని జోడించండి లోపల ది సాధారణ-రేపర్ div:





CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

డిజైన్‌తో సరిపోలని ఇతర ఫాంట్‌ల గురించి చింతించకండి - మీరు తర్వాత దాన్ని చక్కదిద్దుతారు. మీరు విభిన్న చిహ్నాలను ఉపయోగించాలనుకుంటే, దానికి వెళ్ళండి ఫాంట్ అద్భుతమైన చిహ్నాలు పేజీ, ఆపై మార్చండి fa- వాల్యూమ్-డౌన్ మీరు ఉపయోగించాలనుకుంటున్న చిహ్నం పేరుకు.

నావిగేషన్ బార్‌లోకి వెళితే, మీరు క్రమం లేని జాబితాను ఉపయోగిస్తారు ( ది ) దీని కొరకు. ఈ HTML ని జోడించండి తర్వాత ది లోగో-కంటైనర్ (కానీ ఇప్పటికీ లోపల సాధారణ-రేపర్ ):

• Home


• About


• Reviews


• Contact

ది href ఇతర పేజీలకు లింక్ చేయడానికి ఉపయోగిస్తారు. ఈ ట్యుటోరియల్ వెబ్‌సైట్‌లో ఇతర పేజీలు లేవు, కానీ మీరు పేరు మరియు ఫైల్ మార్గాన్ని (అవసరమైతే) ఇక్కడ ఉంచవచ్చు, ఉదా. సమీక్షలు. html . మీరు దీన్ని రెండు డబుల్ కోట్స్ లోపల ఉంచారని నిర్ధారించుకోండి.

ఇక్కడ CSS ఉంది:

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

ఈ CSS ఒక ప్రారంభమవుతుంది క్రమం లేని జాబితా . ఇది ఉపయోగించి బుల్లెట్ పాయింట్లను తొలగిస్తుంది జాబితా-శైలి-రకం: ఏదీ లేదు; . లింకులు కొద్దిగా వేరుగా ఉంటాయి మరియు మీరు మీ మౌస్‌ని వాటిపై ఉంచినప్పుడు రంగు ఇవ్వబడుతుంది. చిన్న బూడిద డివైడర్ ప్రతి మూలకంపై కుడివైపు సరిహద్దుగా ఉంటుంది, తర్వాత దానిని ఉపయోగించి చివరి మూలకం కోసం తీసివేయబడుతుంది చివరి లింక్ తరగతి. ఇది ఎలా ఉంటుందో ఇక్కడ ఉంది:

ఈ విభాగానికి మిగిలి ఉన్నది ఎరుపు సమాంతర రంగు హైలైట్ మాత్రమే. తర్వాత ఈ HTML ని జోడించండి సాధారణ-రేపర్ :

మరియు ఇక్కడ CSS ఉంది:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

ఇది పూర్తి చేసిన విభాగం. ఇది ఎలా ఉంటుందో ఇక్కడ ఉంది - డిజైన్‌తో సమానంగా ఉందా?

ప్రధాన కంటెంట్ ప్రాంతం

ఇప్పుడు ప్రధాన కంటెంట్ ప్రాంతానికి వెళ్లడానికి సమయం ఆసన్నమైంది-'మడత పైన' అని పిలవబడేది. ఈ భాగం ఎలా ఉంటుందో ఇక్కడ ఉంది:

ఇది చాలా సరళమైన భాగం, కుడివైపున ఉన్న ఇమేజ్‌తో ఎడమవైపు కొంత టెక్స్ట్. ఈ ప్రాంతం ఉంటుంది వదులుగా సుమారుగా మూడింట మూడుగా విభజించబడింది బంగారు నిష్పత్తి .

ఈ భాగం కోసం మీకు నమూనా చిత్రం అవసరం. ఇది డౌన్‌లోడ్‌లో చేర్చబడింది. ఈ చిత్రం 670px వెడల్పు కలిగి ఉంది మరియు ఇది మా పానాసోనిక్ Lumix DMC-G80/G85 రివ్యూ నుండి వచ్చింది.

HTML జోడించండి తర్వాత ది టాప్-కలర్-స్ప్లాష్ మూలకం:

Welcome!

Noise Media is a technology company specialising in tech reviews.

We’re very good at what we do, but unfortunately, we are not a real company.

Make sure you visit makeuseof.com for the full tutorial on how to build this website.

iso-to-usb సాఫ్ట్‌వేర్

Alternatively, check out our review of the Panasonic G80 shown on the right!

ఎలాగో గమనించండి సాధారణ-రేపర్ మూలకం తిరిగి వచ్చింది (ఇది తరగతులను ఉపయోగించడం యొక్క ఆనందం). చిత్రం ఎందుకు అని మీరు ఆశ్చర్యపోవచ్చు ( img ) ట్యాగ్ మూసివేయబడదు. ఇది సెల్ఫ్ క్లోజింగ్ ట్యాగ్. ఫార్వర్డ్ స్లాష్ ( /> ) ఇది సూచిస్తుంది, ఎందుకంటే ట్యాగ్‌ను మూసివేయడం ఎల్లప్పుడూ సమంజసం కాదు.

CSS:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

ఇక్కడ అతి ముఖ్యమైన లక్షణం బాక్స్-సైజింగ్: బోర్డర్-బాక్స్; . మూలకాలు ఎల్లప్పుడూ 40% లేదా 60% వెడల్పుతో ఉండేలా ఇది నిర్ధారిస్తుంది. డిఫాల్ట్ (ఈ లక్షణం లేకుండా) మీ పేర్కొన్న వెడల్పుతో పాటు ఏదైనా పాడింగ్, మార్జిన్‌లు మరియు బోర్డర్‌లు. ఇమేజ్ క్లాస్ ( ఫీచర్-చిత్రం ) ఒక గరిష్ట వెడల్పు యొక్క 500px . మీరు ఒక కోణాన్ని (వెడల్పు లేదా ఎత్తు) మాత్రమే పేర్కొని, మరొకటి ఖాళీగా ఉంచినట్లయితే, css దాని కారక నిష్పత్తిని కొనసాగిస్తూ చిత్రం పరిమాణాన్ని మారుస్తుంది.

కోట్ ప్రాంతం

కోట్ ప్రాంతాన్ని సృష్టిద్దాం. ఇది ఇలా కనిపిస్తుంది:

ఇది మరొక సాధారణ ప్రాంతం. ఇది ముదురు బూడిదరంగు నేపథ్యాన్ని కలిగి ఉంది, తెలుపు కేంద్రీకృత వచనంతో.

ఈ HTML ని జోడించండి తర్వాత మునుపటి సాధారణ-రేపర్ :

makeuseof is the best website ever

Joe Coburn

ఆపై ఈ CSS:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

ఇక్కడ పెద్దగా ఏమీ జరగడం లేదు. సైజింగ్ అనేది ప్రధాన సర్దుబాటు అవసరం - ఫాంట్ సైజు, స్పేసింగ్ మరియు మొదలైనవి. ఇప్పుడు మొత్తం విషయం ఎలా ఉందో ఇక్కడ ఉంది - ఇది వెబ్‌సైట్ లాగా కనిపించడం ప్రారంభించింది!

ఐకాన్ ప్రాంతం

నొక్కడం కొనసాగించండి - ఇది దాదాపు పూర్తయింది! సృష్టించడానికి అవసరమైన తదుపరి ప్రాంతం ఇక్కడ ఉంది:

ఈ భాగం అనేక తరగతులను ఉపయోగించుకుంటుంది. కంటెంట్‌ను మినహాయించి, మూడు చిహ్నాలు ఎక్కువగా ఒకే విధంగా ఉంటాయి, కాబట్టి ఐడీలకు బదులుగా తరగతులను ఉపయోగించడం అర్ధమే. ఈ HTML ని జోడించండి తర్వాత మునుపటి కోట్-ప్రాంతం :

YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!

Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.

Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.

ఈ మూడు చిహ్నాలు కూడా ఫాంట్-అద్భుతం . HTML మరోసారి ఉపయోగిస్తోంది సాధారణ-రేపర్ తరగతి. ఇక్కడ CSS ఉంది:

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

CSS లో కొన్ని కొత్త విషయాలు జరుగుతున్నాయి. గుండ్రని మూలలు సెట్ చేయబడుతున్నాయి సరిహద్దు-వ్యాసార్థం: 200px; . ఈ విలువను వెడల్పు వలె సెట్ చేయడం వలన ఖచ్చితమైన సర్కిల్ ఏర్పడుతుంది. మీరు గుండ్రని మూలలతో కూడిన చతురస్రాన్ని ఎక్కువగా ఇష్టపడితే దీన్ని తగ్గించవచ్చు. డివిలకు హోవర్ చర్యలు ఎలా వర్తిస్తాయో గమనించండి - ఇది లింక్‌లకు మాత్రమే పరిమితం కాదు. ఈ విభాగం ఇప్పుడు ఎలా ఉందో ఇక్కడ ఉంది:

ఫుటర్

చేయవలసిన చివరి విషయం ఫుటరు! ఇది చాలా సులభం, ఎందుకంటే ఇది టెక్స్ట్ లేని బూడిదరంగు ప్రాంతం. చిహ్నం ప్రాంతాల తర్వాత ఈ HTML ని జోడించండి ' సాధారణ-రేపర్ :

ఇక్కడ CSS ఉంది:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

చూడండి - నిజంగా సాధారణ అంశాలు.

కొంత పిజ్జాజ్ జోడించండి

అంతే, కోడింగ్ పూర్తయింది! మీరు ఖచ్చితంగా విషయాలను అలాగే ఉంచవచ్చు, ఇది పూర్తయిన వెబ్‌పేజీ. అయితే అది కనిపించడం లేదని మీరు గమనించి ఉండవచ్చు సరిగ్గా డిజైన్ లాగా. దీనికి ప్రధాన కారణం ఉపయోగించిన ఫాంట్‌లు. దాన్ని క్రమబద్ధీకరిద్దాం.

చాలా టైటిల్స్ కోసం ఉపయోగించే ఫాంట్ అసంఖ్యాక ప్రో . దీనితో వస్తుంది అడోబ్ క్లౌడ్‌ను సృష్టించండి, కానీ అది వెబ్‌ఫాంట్‌గా అందుబాటులో లేదు. వెబ్‌పేజీలో ప్రస్తుతం ఉపయోగించిన ఫాంట్ హెల్వెటికా . ఇది సరే అనిపిస్తుంది, కాబట్టి మీరు దానిని అలాగే ఉంచవచ్చు PT సాన్స్ వెబ్‌ఫాంట్‌గా అందుబాటులో ఉంది. అన్ని టెక్స్ట్ కోసం ఉపయోగించే ఫాంట్ PT సెరిఫ్ , ఇది వెబ్‌ఫాంట్‌గా అందుబాటులో ఉంది.

వెబ్‌ఫాంట్‌లు ఒక సాధారణ ప్రక్రియ. మీ కంప్యూటర్‌లో కొత్త ఫాంట్‌ను లోడ్ చేసినట్లే, వెబ్‌పేజీలు డిమాండ్‌పై ఫాంట్‌లను లోడ్ చేయగలవు. దీన్ని చేయడానికి ఉత్తమ మార్గాలలో ఒకటి Google ఫాంట్‌లు .

మెరుగైన ఫాంట్‌లకు మారడానికి ఈ CSS ని జోడించండి:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

ఇప్పుడు కొత్త ఫాంట్‌లను ఉపయోగించడానికి మీ html మరియు బాడీ ఎలిమెంట్‌లను సవరించండి:

font-family: 'PT Serif', 'Helvetica', 'Arial';

H3 మూలకం జాబితాలో ఎలా చేర్చబడలేదని గమనించండి - ఇది డిఫాల్ట్ అవుతుంది PT-Serif బదులుగా PT- సాన్స్ .

అందం యొక్క చివరి బిట్‌గా, మూడు విభిన్న ఫీచర్డ్ ఇమేజ్‌ల ద్వారా స్క్రోల్ చేయడానికి కొన్ని జావాస్క్రిప్ట్‌ని ఉపయోగిద్దాం. నీకు అవసరం అవుతుంది చిత్రం_2 మరియు చిత్రం_3 ఈ భాగం కోసం, మరియు మళ్ళీ, ఇది ఐచ్ఛికం. ఈ ఫీచర్ లేకుండా ఈ సమయంలో వెబ్‌సైట్ పూర్తిగా పనిచేస్తుంది. ఇది ఎలా ఉంటుందో ఇక్కడ ఉంది (వేగవంతం):

మూడు ఫీచర్ చేసిన చిత్రాలను చేర్చడానికి మీ HTML ని సవరించండి. వీటిలో రెండు CSS క్లాస్ ఎలా ఉందో గమనించండి దాచబడింది . ప్రతి చిత్రానికి ఒక ID ఇవ్వబడింది, తద్వారా జావాస్క్రిప్ట్ వాటిలో ప్రతి ఒక్కటి స్వతంత్రంగా లక్ష్యంగా చేసుకోవచ్చు.







అదనపు ఫీచర్ చేసిన చిత్రాలను దాచడానికి అవసరమైన CSS ఇక్కడ ఉంది:

.hidden {
display: none;
}

ఇప్పుడు HTML మరియు CSS జాగ్రత్త తీసుకున్నందున, జావాస్క్రిప్ట్‌కు మారదాం. ఈ భాగం కోసం డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM) ను అర్థం చేసుకోవడం ఉపయోగకరంగా ఉంటుంది, కానీ ఇది అవసరం లేదు.

కనుగొను స్క్రిప్ట్ పేజీ దిగువన ఉన్న ప్రాంతం:


/* JavaScript goes here, at the bottom of the page */


లోపల ఈ క్రింది జావాస్క్రిప్ట్‌ను జోడించండి స్క్రిప్ట్ ట్యాగ్:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

ఇక్కడ కొన్ని విషయాలు జరుగుతున్నాయి. కోడ్ లోపల ఉంది $ (పత్రం). ఇప్పటికే () . మీ బ్రౌజర్ పేజీ రెండరింగ్ పూర్తి చేసిన తర్వాత ఇది అమలు అవుతుందని దీని అర్థం - ఇది మంచి పద్ధతి. ది మధ్యంతర () కాల్ చేయడానికి ఫంక్షన్ ఉపయోగించబడుతుంది ఇమేజ్ () ముందుగా నిర్వచించిన వ్యవధిలో మిల్లీసెకన్లలో క్రమం తప్పకుండా పనిచేస్తాయి (1000 మిల్లీసెకన్లు = 1 సెకను). ఇది లో నిల్వ చేయబడుతుంది సమయం వేరియబుల్. స్క్రోలింగ్‌ను వేగవంతం చేయడానికి లేదా తగ్గించడానికి మీరు దీన్ని పెంచవచ్చు లేదా తగ్గించవచ్చు. చివరగా, ఒక సాధారణ కేస్ స్టేట్‌మెంట్ వివిధ చిత్రాలను చూపించడానికి ఉపయోగించబడుతుంది మరియు ప్రస్తుతం చూపిస్తున్న ఇమేజ్‌ని ట్రాక్ చేయండి.

కోడింగ్ ఛాలెంజ్

అంతే! ఆశాజనక ప్రక్రియలో మీరు చాలా నేర్చుకున్నారు. మీరు సవాలు చేయాలనుకుంటే మరియు మీ కొత్త నైపుణ్యాలను పరీక్షించాలనుకుంటే, ఈ మార్పులను అమలు చేయడానికి ఎందుకు ప్రయత్నించకూడదు:

ఫుటరును జోడించండి: ఫుటర్‌లోకి కొంత టెక్స్ట్‌ని జోడించండి (సూచన: మీరు దాన్ని మళ్లీ ఉపయోగించవచ్చు సాధారణ-రేపర్ మరియు మూడింట ఒక వంతు/రెండు వంతు తరగతులు.)

ఇమేజ్ స్క్రోలింగ్ మెరుగుపరచండి: ఇమేజ్ మార్పులను యానిమేట్ చేయడానికి జావాస్క్రిప్ట్‌ను సవరించండి (సూచన: j క్వెరీని చూడండి ఫడేన్ మరియు యానిమేటెడ్ ).

బహుళ కోట్‌లను అమలు చేయండి: అనేక విభిన్న వాటిల్లో ఒకటిగా మారడానికి కోట్‌లను సవరించండి (సూచన: ప్రారంభ స్థానం కోసం ఇమేజ్ స్క్రోలింగ్ కోడ్‌ని చూడండి).

సర్వర్‌ను సెటప్ చేయండి: సర్వర్‌ను సెటప్ చేయండి మరియు వెబ్‌పేజీ మరియు సర్వర్ మధ్య డేటాను పంపండి (సూచన: JSON మరియు పైథాన్‌కి మా గైడ్ చదవండి).

రెడ్డిట్లో కర్మ అంటే ఏమిటి

మీరు జావాస్క్రిప్ట్‌ను ఉపయోగించడానికి సౌకర్యంగా ఉన్న తర్వాత లేదా మీకు రూబీతో ఏదైనా అనుభవం ఉంటే, మీరు గాట్స్‌బిజెఎస్ లేదా జెకిల్ వంటి స్టాటిక్ వెబ్‌సైట్ బిల్డర్‌తో వెబ్‌సైట్‌ను సృష్టించడానికి ప్రయత్నించవచ్చు.

షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ మీ Windows 10 డెస్క్‌టాప్ యొక్క రూపాన్ని మరియు అనుభూతిని ఎలా మార్చాలి

విండోస్ 10 మెరుగ్గా కనిపించేలా ఎలా చేయాలో తెలుసుకోవాలనుకుంటున్నారా? విండోస్ 10 ను మీ స్వంతం చేసుకోవడానికి ఈ సాధారణ అనుకూలీకరణలను ఉపయోగించండి.

తదుపరి చదవండి సంబంధిత అంశాలు

• ప్రోగ్రామింగ్
• HTML
• వెబ్ డిజైన్
• CSS

రచయిత గురుంచి జో కోబర్న్(136 కథనాలు ప్రచురించబడ్డాయి)

జో UK లోని లింకన్ విశ్వవిద్యాలయం నుండి కంప్యూటర్ సైన్స్‌లో గ్రాడ్యుయేట్. అతను ఒక ప్రొఫెషనల్ సాఫ్ట్‌వేర్ డెవలపర్, మరియు అతను డ్రోన్‌లను ఎగురవేయనప్పుడు లేదా సంగీతం వ్రాయనప్పుడు, అతను తరచుగా ఫోటోలు తీయడం లేదా వీడియోలను ఉత్పత్తి చేయడం చూడవచ్చు.

జో కోబర్న్ నుండి మరిన్ని

మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి