Web Design, Web Development And Mobile App Development Tutorial - Programming (2) - Nairaland
Nairaland Forum / Science/Technology / Programming / Web Design, Web Development And Mobile App Development Tutorial (14603 Views)
Programming, Coding Training In Akure, Ondo State (web Design, Web Dev Training) / Ios App Development Tutorial / Web Development Tutorial (2) (3) (4)
(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (Reply) (Go Down)
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:53am On Jan 26, 2019 |
NEXT : HTML NAV ELEMENT This helps to house a block of navigation links on our html page which allows your users to move from one page to the other on your website easily. Now, let us add the nav element to our previous code in our index.html file. Also, create a new html page for about and contact i.e about.html and contact.html <!DOCTYPE html> <html> <head> <title>Welcome</title><!-- This is what is responsible for what you see on the browser tab--> </head> <body> <header> <h1>Royal Rumble</h1> <p>Welcome to the official site of WWE</p> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="blog.html">News</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <article> <h2>2019 WWE Royal Rumble matches, card, rumors, date, entrants, location, start time, predictions</h2> <p>The Road to WrestleMania is upon us, and as per usual, the journey begins this Sunday night with the 2019 WWE Royal Rumble event. <br> In addition to the 30-competitor Royal Rumble matches for both the men and women with world title implications at stake, a plethora of titles will be on the line <br>as WWE brings us one of the more stacked cards that we've seen in recent memory. The Royal Rumble this year takes place in the baseball stadium setting of Chase Field in Phoenix,<br> Arizona, home of the Arizona Diamondbacks, which should make the overall experience even more enjoyable than usual. </p> </article> <footer> <p> © 2019. All Rights Reserved. This is the footer</p> </footer> </body> </html>
|
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 10:04am On Jan 26, 2019 |
NEXT - NON SEMANTIC ELEMENTS They add no semantic or structural meaning to our code but they are super valuable to add more additional structure to our page from time to time. For example, the div and span tag. DIV ELEMENT - This is a block level element. <div>Content here </div> Div tag allows us to style the page with CSS much easier. SPAN ELEMENT - This more like an inline level element that you can use like the way you use <strong> tag or <em> tag. But it as no default effect on your page but super helpful in using css to style any part of your page easily. <span> content</span> |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 10:11am On Jan 26, 2019 |
NEXT : HTML COMMENTS This is a text that we include it our code or anything that we don't want to be displayed by the browser. It is usually like this <!--The text goes here--> Comment is usually use by developers to explain what the code is doing. We can say, it is like an inline documentation. For example, check this code from the previous lesson <!DOCTYPE html> <html> <head> <title>Welcome</title><!-- This is what is responsible for what you see on the browser tab--> </head> <body> <!--This is the header of my page--> <header> <h1>Royal Rumble</h1> <p>Welcome to the official site of WWE</p> </header> <footer> <p> © 2019. All Rights Reserved. This is the footer</p> </footer> </body> </html> You will notice that, there are two comments in this code explaining what the part or tag means. Yet, when you view the index.html on your browser, you will not see the comment. Comment makes your code readable and easy to debug, even for you. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 10:18am On Jan 26, 2019 |
HTML SECTION ELEMENT Think of section as what we can use to break up piece of content into small parts. <section></section> Now, i need you to work on how to use section in your code and post the screenshot of your code and output on the browser here. This is where we will stop for now. Thanks. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Tosineb: 10:42pm On Jan 27, 2019 |
add me to the group
08035022501 |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Collins4u1(m): 12:59pm On Jan 28, 2019 |
here are my works sir... Thank you
|
| Re: Web Design, Web Development And Mobile App Development Tutorial by GreatAchiever1: 1:19pm On Jan 28, 2019 |
New here. Now following. I think flowing with u guys might b the motivation I need |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 1:27pm On Jan 28, 2019 |
Collins4u1: Wow, awesome. Well done bro. I like this |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 1:28pm On Jan 28, 2019 |
Collins4u1: You are welcome bro. Please try to use the "section" tag as well. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 1:30pm On Jan 28, 2019 |
NEXT - HTML FORMS From the w3school. The HTML <form> element defines a form that is used to collect user input: <form> . form elements . </form> An HTML form contains form elements. Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. I will break this down to make it easy to understand. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Collins4u1(m): 1:58pm On Jan 28, 2019 |
Continue sir |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 1:59pm On Jan 28, 2019 |
HTML FORM CONTINUED Forms can be use to receive users input and pass the data to the server easily. We can say that forms are the interactive part of a web page. E.g Registration form, where you ask users to enter username, fullname, password etc to sign up on your website. We have different type of form element e.g input element, select element etc. You can read more about form here https://www.w3schools.com/html/html_forms.asp Now, let us create a simple form, the purpose is to create a simple registration form that will have first name, last name, email, password, submit button. For First name and last name, we will use an input element of type "text" i.e <input type="text"> For Email, we will use email input type i.e <input type="email"> For password, we will use password input type i.e <input type="password"> For submit, we will use a button i.e <input type"submit" value"Register Now"> Note: Whatever you enter at the value for the submit is what will appear on the button name. 2. For the input type, you will notice that the only thing that changed is the value for the "type" of the input while the code remain the same i.e <input type=""> For example Step 1: Open your index.html with your text editor. (I believe now you know what a text editor is). Step 2: Type this between your open body tag <body> and closing body tag </body> <form> <label for="firstname">First Name:</label> <input id="firstname" type="text"> <label for="lastname">Last Name:</label> <input id="lastname" type="text"> <label for="email">Email:</label> <input id="email" type="email"> <label for="Password">Password:</label> <input id="Password" type="password"> <input type="submit" value="Register Now"> </form> Step 3: Save the index.html file to see the changes you just made to the file. Step 4: Open the index.html file on your browser.
|
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 2:02pm On Jan 28, 2019 |
HTML FORM CONTINUED Still on the html form, if you look at the last example, you will notice that all the form input fields are on a single line. Now, your work is to make each form fields be on seperate line and not on a single like i.e First name and the first name input fields should be on is own line while the last name and the text field should be below on a different line. I hope we understand?. Please do this and upload your work. We will continue the tutorial on html form later today. Thanks 1 Like |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Collins4u1(m): 2:21pm On Jan 28, 2019 |
Here's my form work. I created a new page for it... hope its still okay?
|
| Re: Web Design, Web Development And Mobile App Development Tutorial by gbengaoyeladun(m): 3:05pm On Jan 28, 2019 |
08106341850. Add up |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 3:15pm On Jan 28, 2019 |
Collins4u1: Yes, it is okay. Well done |
| Re: Web Design, Web Development And Mobile App Development Tutorial by messi042: 7:05am On Jan 29, 2019 |
kreativemind:is it possible to build a mobile app or social media app like instagram or facebook that the videos doesn't need mega byte (mb) to start playing ? |
| Re: Web Design, Web Development And Mobile App Development Tutorial by sewanut(m): 1:01pm On Jan 29, 2019 |
kreativemind:Please am sir am having a problem with contact form... Please sir I need your help may God help you sir... |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 1:21pm On Jan 29, 2019 |
sewanut: Okay, how can we help you? Please go ahead |
| Re: Web Design, Web Development And Mobile App Development Tutorial by sewanut(m): 3:09pm On Jan 29, 2019 |
kreativemind:I need the form to send mail to the site email. That's all. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Apena05: 3:25pm On Jan 29, 2019 |
08078702727 |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 3:44pm On Jan 29, 2019 |
sewanut: Step by step bro. We have not reach that part. There is no problem with reading and studying ahead of the class, am really impressed with this, but I will only attend to questions on the topic that we have treated so far. So, you can be patient or research on how to send mail through the form. All the best. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Apena05: 4:47pm On Jan 29, 2019 |
I must say I really love this thread it as helped me a lot in just this few days... Keep up the good work |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 4:59pm On Jan 29, 2019 |
Apena05: Thanks |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Jerrychimaijem(m): 8:16am On Jan 30, 2019 |
08061228184 |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 8:52am On Jan 30, 2019 |
I will post the tutorials for yesterday, the one for today and the one for Thursday today as well because i will not have the time to post any tutorial tomorrow. So, like i promised at the beginning of the tutorial, i will always make plans for days that i will be busy to post any tutorial here. So for now, i will post some this morning and the rest in the evening. Thanks |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 8:52am On Jan 30, 2019 |
HTML FORM CONTINUED More HTML INPUT 1. Telephone : <input type="tel"> 2. Textarea: This allows the user to enter multiple line of text. The tag is <textarea></textarea> OTHER TYPES OF FORM ELEMENTS 1. Select: It allows user to choose between large lists of options that you have entered for them. e.g You can use it to show list of countries, and user will select their own country etc <select name="country"> <option value="CountEngland">England</option> <option value="CountItaly">Italy</option> <option value="CountFrance">France</option> <option value="CountGermany">Germany</option> <option value="CountSpain">Spain</option> <option value="CountNigeria">Nigeria</option> </select> Note: The "name" and "value" part of the select form element allows you to pass the value the user choose to the server or wherever you want to save the data. 2. Radio input: It allows use to choose between options e.g Gender, male or female <input id="gmale" type="radio" name="gender"><label for="gmale">Male</label> <input id="gfemale" type="radio" name="gender"><label for="gfemale">Female</label> Note: The "name" attribute of this form, allows users to choose one option. But the two radio input must have the same name attribute e.g name="gender". Now to make it appear okay, you can create a border around it and put a question or tell the users what this part of the form is about, this way the users will know what to choose. We will use fieldset tag to build a border around the radio input. It will be like this...... <fieldset> <legend>Your Gender?</legend> <input id="gmale" type="radio" name="gender"><label for="gmale">Male</label> <input id="gfemale" type="radio" name="gender"><label for="gfemale">Female</label> </fieldset> Note: The fieldset throw the border around it and the legend is responsible for telling the users about this part of the form. 3. Checkbox: It allows users to choose multiple options. The checkbox element are similar except few things. Check this out <fieldset> <legend>What is your hobbies? (Please check all the hobbies you like)</legend> <input type="checkbox"><label>Reading</label> <input type="checkbox"><label>Travelling</label> <input type="checkbox"><label>Swimming</label> <input type="checkbox"><label>playing games</label> </fieldset> Now you can put all this within a form tag, like this <!DOCTYPE html> <html> <head> <title>Welcome</title><!-- This is what is responsible for what you see on the browser tab--> </head> <body> <header> <h1>Royal Rumble</h1> <p>Welcome to the official site of WWE</p> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="blog.html">News</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <form> <select name="country"> <option value="CountEngland">England</option> <option value="CountItaly">Italy</option> <option value="CountFrance">France</option> <option value="CountGermany">Germany</option> <option value="CountSpain">Spain</option> <option value="CountNigeria">Nigeria</option> </select> <fieldset> <legend>Your Gender?</legend> <input id="gmale" type="radio" name="gender"><label for="gmale">Male</label> <input id="gfemale" type="radio" name="gender"><label for="gfemale">Female</label> </fieldset> <fieldset> <legend>What is your hobbies? (Please check all the hobbies you like)</legend> <input type="checkbox"><label>Reading</label> <input type="checkbox"><label>Travelling</label> <input type="checkbox"><label>Swimming</label> <input type="checkbox"><label>playing games</label> </fieldset> </form> <footer> <p> © 2019. All Rights Reserved. This is the footer</p> </footer> </body> </html> 1 Like |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:08am On Jan 30, 2019 |
NEXT : HTML TABLES Table: This allows you organize your content. There was a time that tables are use to build a whole site, because it is organized but not anymore. But you can still use table tag to display content that you want to display in a organized format e.g timetables, schedule appointments, price, sales data for the day etc I will not be treating all the table elements for now but we will set up the foundation knowledge you need. Now, the table tag is like this <table> <tr> <td>Column1</td><td>Column 2</td> </tr> </table> Now let us break the above code down to make it easy for you to understand. You open the table tag like this <table> and you close the table tag like this </table>. 1. The <tr> tag is for the row of the table, for example the above table only have one row. You open the table row like this <tr> and you close the table row like this </tr> 2. The <td> tag is for table data, we can say it is the column of each row of your table. For example, the above table only have one single row and inside the row, there are two table data i.e <td></td><td></td>, this means that the two have two columns. You can have as many rows as possible and as many column as possible. Now let me show you table with two rows and two columns each <table> <tr><!--Row 1--> <td>Column1</td><td>Column 2</td> </tr> <tr><!--Row 2--> <td>Column1</td><td>Column 2</td> </tr> </table> |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 9:25am On Jan 30, 2019 |
If you check the output of your code in the browser, you will notice that, eventhough it is well arranged, their is no indication that we are using table. Now, to display the table line, we will use "border", you can also give the table width and height and you can also push the table to the center of the browser. To do that, adjust the code above like this <table broder="1" width="800px" height="700px"> <tr><!--Row 1--> <td>Column1</td><td>Column 2</td> </tr> <tr><!--Row 2--> <td>Column1</td><td>Column 2</td> </tr> </table> Try this and post the screenshot of your output here. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by Nobody: 10:01am On Jan 30, 2019 |
07032459277 |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 10:39am On Jan 30, 2019 |
NEXT : HTML TABLES CONTINUED <table> <tr><!--Row 1--> <td>Column1</td><td>Column 2</td> </tr> <tr><!--Row 2--> <td>Column1</td><td>Column 2</td> </tr> </table> Note: We can add table heading to our table to give it more structured. For example, we can have table heading for S/N, Name, Country, Email, City, Gender Our table should look like this with the table heading <table border="1" width="800px" height="700px"> <tr> <th>S/N</th><th>Name</th><th>Country</th><th>Email</th><th>City</th><th>Gender</th> </tr> <tr><td>1</td><td>John</td><td>USA</td><td>john@mail.com</td><td>New York</td><td>Male</td></tr> </table> One last thing before we end this part. It is possible to even go a step further to make the table well arranged and easy to format for our CSS. It gives more semantic meaning the flexibility to our code. Now, i will take the above code and add thead and tbody to it. <table border="1" width="800px" height="700px" align="center"> <thead> <tr> <th>S/N</th><th>Name</th><th>Country</th><th>Email</th><th>City</th><th>Gender</th> </tr> </thead> <tbody> <tr><td>1</td><td>John</td><td>USA</td><td>john@mail.com</td><td>New York</td><td>Male</td></tr> </tbody> </table> So, the thead is where you put all the data for the table header and tbody is for the table data i.e td. Above all, by the time you start doing this yourself, you can add your own creativity to it. The purpose of this turorials is to set up the foundation for you, then you can start building on the foundation. All the best guys. WE WILL FOCUS ON CSS IN OUR NEXT LESSON. CSS IS WHERE THE FUN BEGINS AS WE BEGIN TO STYLE OUR WEB PAGE TO MAKE IT MORE BEAUTIFUL AND WELL STRUCTURED. |
| Re: Web Design, Web Development And Mobile App Development Tutorial by kreativemind: 4:46pm On Feb 01, 2019 |
INTRODUCTION TO CSS - CASCADING STYLE SHEET Through css, you can add color layout, style, design to your html page. In summary, you describe your content through HTML and use CSS to describe how you want it to appear to your users. I will using lorem ipsum for our content or using a random content to make it easy for you to understand. We have three ways to define our css. 1. Inline CSS : This is within the html tag. 2. Internal CSS: This is also within the same html document but it is placed within the open head tag i.e <head> and closing head tag i.e </head>. Usually like this <head> <style type=""text/css"> ......YOU PLACE ALL THE CSS RULES HERE....... </style> </head> 3. External CSS: This is created on a separate document and linked to our html page. For example <head> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> href= is what is responsible for putting the location of the css file. For example, this means that, you have created a filder named "css" in your project folder and you now saved a file name style.css inside that "css" folder. For you to create a css file, Step 1: Open your text editor Step 2: Click create a new file Step 3: Click "Save" Step 4: Give it any name e.g style and add the extension ".css" i.e style.css Save that new file inside your project folder. If you create a folder called "css" i.e this is where you want to put all the css file. Like you did for images folder where you put all the images that you want to use for the project. Same thing is applicable here, create a folder called "css" in your project folder and save the file inside that folder.
|
(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (Reply)
What's Programming Lauguage Do You Think Is Best To Start With / ATM Machine Programming Language. / Ogun State Traims 200 Trained In Python Programming Language
(Go Up)
| Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 99 |